/* ========================================
   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;
    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: 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);
}




/* ===== RESEARCH FINDER PAGE ===== */
/* Styles for /research-finder */

body.finder-page {
    background: var(--sidebar-bg);
    color: var(--content-text);
    min-height: 100vh;
    padding-top: 52px;
    display: flex;
    flex-direction: column;
}

.finder-page {
    --finder-accent: var(--accent);
    --finder-accent-light: rgba(37, 99, 235, 0.1);
    --finder-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --finder-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --finder-shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
}

:root[data-theme="dark"] .finder-page {
    --finder-accent: var(--accent);
    --finder-accent-light: rgba(96, 165, 250, 0.12);
    --finder-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --finder-shadow-lg: 0 10px 25px rgba(0,0,0,0.3);
}


/* ===== RESEARCH FINDER PAGE ===== */
/* Styles for /research-finder */

body.finder-page {
    background: var(--sidebar-bg);
    color: var(--content-text);
    min-height: 100vh;
    padding-top: 52px;
    display: flex;
    flex-direction: column;
}

.finder-page {
    --finder-accent: var(--accent);
    --finder-accent-light: rgba(37, 99, 235, 0.1);
    --finder-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --finder-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --finder-shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
}

:root[data-theme="dark"] .finder-page {
    --finder-accent: var(--accent);
    --finder-accent-light: rgba(96, 165, 250, 0.12);
    --finder-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --finder-shadow-lg: 0 10px 25px rgba(0,0,0,0.3);
}

/* ===== Research Finder specific styles ===== */
/* Header - matching novasapiens.ru */

/* Main content */
.finder-page .finder-main {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 40px 24px;
flex: 1;
box-sizing: border-box;
}

/* Hero section */
.finder-page .finder-hero {
text-align: center;
margin-bottom: 40px;
}

.finder-page .finder-hero h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
color: var(--content-text);
}

.finder-page .finder-hero p {
font-size: 16px;
color: var(--content-text-tertiary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* Search area */
.finder-page .finder-search {
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: 16px;
padding: 24px;
box-shadow: var(--finder-shadow-lg);
margin-bottom: 32px;
box-sizing: border-box;
width: 100%;
}

.finder-page .search-input-wrapper {
position: relative;
}

.finder-page .search-input-wrapper textarea {
width: 100%;
min-height: 100px;
padding: 16px;
border: 2px solid var(--content-border);
border-radius: 12px;
font-size: 16px;
font-family: inherit;
line-height: 1.6;
resize: vertical;
background: var(--content-bg);
color: var(--content-text);
transition: border-color 0.2s;
box-sizing: border-box;
}

.finder-page .search-input-wrapper textarea:focus {
outline: none;
border-color: var(--finder-accent);
box-shadow: 0 0 0 3px var(--finder-accent-light);
}

.finder-page .search-input-wrapper textarea::placeholder {
color: var(--content-text-tertiary);
opacity: 0.7;
}

.finder-page .char-counter {
display: none;
text-align: right;
font-size: 11px;
color: var(--content-text-tertiary);
margin-top: 4px;
padding-right: 4px;
font-family: 'IBM Plex Mono', monospace;
}

/* Pipeline selector */
.finder-page .search-pipeline-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
.finder-page .pipeline-chips {
    display: flex;
    gap: 8px;
}
.finder-page .pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 20px;
    background: var(--content-bg, #fff);
    color: var(--content-text-secondary, #6b7280);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.finder-page .pipeline-chip:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.finder-page .pipeline-chip.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #fff;
}
.finder-page .pipeline-chip.active svg {
    stroke: #fff;
}
@media (max-width: 480px) {
    .finder-page .pipeline-chips {
        gap: 6px;
    }
    .finder-page .pipeline-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Search mode selector (AI / Keyword) */
.finder-page .search-mode-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
.finder-page .search-mode-chips {
    display: flex;
    gap: 8px;
}
.finder-page .search-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 20px;
    background: var(--content-bg, #fff);
    color: var(--content-text-secondary, #6b7280);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.finder-page .search-mode-chip:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.finder-page .search-mode-chip.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #fff;
}
.finder-page .search-mode-chip.active svg {
    stroke: #fff;
}
@media (max-width: 480px) {
    .finder-page .search-mode-chips {
        gap: 6px;
    }
    .finder-page .search-mode-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Date filter row */
.finder-page .search-filters-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.finder-page .filter-date-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--content-text-secondary, #6b7280);
    white-space: nowrap;
    cursor: default;
}

/* Date quick chips */
.finder-page .date-quick-chips {
    display: flex;
    gap: 4px;
}
.finder-page .date-chip {
    padding: 4px 12px;
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 14px;
    background: var(--content-bg, #fff);
    color: var(--content-text-secondary, #6b7280);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.finder-page .date-chip:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.finder-page .date-chip.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #fff;
}
:root[data-theme="dark"] .finder-page .date-chip {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
    color: var(--content-text-secondary, #a0a0b0);
}
:root[data-theme="dark"] .finder-page .date-chip:hover {
    border-color: var(--accent, #60a5fa);
    color: var(--accent, #60a5fa);
}
:root[data-theme="dark"] .finder-page .date-chip.active {
    background: var(--accent, #60a5fa);
    border-color: var(--accent, #60a5fa);
    color: #111;
}
:root[data-theme="dark"] .finder-page .search-mode-chip {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
    color: var(--content-text-secondary, #a0a0b0);
}
:root[data-theme="dark"] .finder-page .search-mode-chip:hover {
    border-color: var(--accent, #60a5fa);
    color: var(--accent, #60a5fa);
}
:root[data-theme="dark"] .finder-page .search-mode-chip.active {
    background: var(--accent, #60a5fa);
    border-color: var(--accent, #60a5fa);
    color: #111;
}
@media (max-width: 480px) {
    .finder-page .date-quick-chips {
        gap: 3px;
    }
    .finder-page .date-chip {
        padding: 4px 8px;
        font-size: 11px;
    }
    .finder-page .search-filters-row {
        gap: 6px;
    }
}

.finder-page .filter-date-input {
    padding: 6px 10px;
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 8px;
    background: var(--content-bg, #fff);
    color: var(--content-text, #1e293b);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.finder-page .filter-date-input:hover {
    border-color: var(--accent, #2563eb);
}

.finder-page .filter-date-input:focus {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Dark theme */
:root[data-theme="dark"] .finder-page .filter-date-input {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
    color: var(--content-text, #e2e8f0);
    color-scheme: dark;
}

/* Centered button block */
.finder-page .search-btn-center {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}

.finder-page .btn-find {
background: var(--accent);
color: white;
border: none;
padding: 12px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}

.finder-page .btn-find:hover {
transform: translateY(-2px);
background: var(--accent-hover);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.finder-page .btn-find:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

.finder-page .btn-find .spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

.finder-page .btn-find.loading .spinner { display: inline-block; }
.finder-page .btn-find.loading .btn-text { display: none; }

/* Cost estimate hint under search button */
.finder-page .search-cost-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 8px;
font-size: 12px;
color: var(--content-text-tertiary);
opacity: 0.7;
}

.finder-page .cost-hint-label {
position: relative;
border-bottom: 1px dotted var(--content-text-tertiary);
cursor: help;
}

.finder-page .cost-hint-label .cost-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: calc(100% + 8px);
right: 0;
width: 260px;
background: var(--content-text);
color: var(--sidebar-bg);
font-size: 12px;
line-height: 1.5;
padding: 10px 14px;
border-radius: 8px;
box-shadow: var(--finder-shadow-lg);
transition: opacity 0.2s, visibility 0.2s;
z-index: 10;
pointer-events: none;
}

.finder-page .cost-hint-label .cost-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 16px;
border: 6px solid transparent;
border-top-color: var(--content-text);
}

.finder-page .cost-hint-label:hover .cost-tooltip {
visibility: visible;
opacity: 1;
}

/* Status bar */
.finder-page .status-bar {
display: none;
background: var(--finder-accent-light);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 24px;
font-size: 14px;
color: var(--finder-accent);
display: flex;
align-items: center;
gap: 10px;
}

.finder-page .status-bar.hidden { display: none; }
.finder-page .status-bar.error {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
}

.finder-page .status-timer {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
opacity: 0.8;
}

/* Results section */
.finder-page .results-section {
display: none;
}

.finder-page .results-section.visible { display: block; }

.finder-page .results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.finder-page .results-header h2 {
font-size: 20px;
font-weight: 600;
}

.finder-page .results-meta {
font-size: 13px;
color: var(--content-text-tertiary);
font-family: 'IBM Plex Mono', monospace;
}

/* Paper card */
.finder-page .paper-card {
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
transition: all 0.2s;
}

.finder-page .paper-card:hover {
border-color: var(--accent);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
transform: translateY(-2px);
}

.finder-page .paper-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}

.finder-page .paper-card-title {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
flex: 1;
}

.finder-page .paper-card-title a {
color: var(--content-text);
text-decoration: none;
}

.finder-page .paper-card-title a:hover {
color: var(--finder-accent);
}

.finder-page .paper-scores {
display: flex;
gap: 8px;
flex-shrink: 0;
}

.finder-page .score-badge {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
font-family: 'IBM Plex Mono', monospace;
}

.finder-page .score-badge.relevance {
background: var(--finder-accent-light);
color: var(--finder-accent);
}

.finder-page .score-badge.rating {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}

.finder-page .paper-card-reason {
    font-size: 14px;
    color: var(--content-text-secondary, #4b5563);
    line-height: 1.7;
    margin-bottom: 12px;
}
.finder-page .paper-card-reason p {
    margin: 0 0 8px 0;
}
.finder-page .paper-card-reason p:last-child {
    margin-bottom: 0;
}
.finder-page .paper-card-reason code {
    background: rgba(99, 102, 241, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: var(--content-text, #374151);
}
:root[data-theme="dark"] .finder-page .paper-card-reason code {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}
.finder-page .paper-card-reason strong {
    color: var(--content-text, #1f2937);
    font-weight: 600;
}

.finder-page .paper-card-chunks {
margin-bottom: 8px;
}

.finder-page .chunks-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--content-text-tertiary);
cursor: pointer;
padding: 4px 0;
user-select: none;
}

.finder-page .chunks-toggle:hover {
color: var(--finder-accent);
}

.finder-page .chunks-toggle .toggle-arrow {
font-size: 10px;
transition: transform 0.2s;
}

.finder-page .chunks-toggle.open .toggle-arrow {
transform: rotate(90deg);
}

.finder-page .chunks-tags {
display: inline-flex;
gap: 4px;
flex-wrap: wrap;
}

.finder-page .chunk-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: 4px;
background: var(--finder-accent-light);
color: var(--finder-accent);
white-space: nowrap;
}

.finder-page .chunks-details {
display: none;
margin-top: 8px;
padding: 8px 12px;
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: 8px;
font-size: 12px;
color: var(--content-text-tertiary);
line-height: 1.5;
}

.finder-page .chunks-details.open {
display: block;
}

.finder-page .chunks-details .chunk-item {
padding: 4px 0;
border-bottom: 1px solid var(--content-border);
}

.finder-page .chunks-details .chunk-item:last-child {
border-bottom: none;
}

.finder-page .chunks-details .chunk-item-type {
font-weight: 600;
color: var(--finder-accent);
margin-right: 6px;
}

.finder-page .paper-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}

.finder-page .paper-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}

.finder-page .paper-tag {
font-size: 11px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(100, 116, 139, 0.1);
color: var(--content-text-tertiary);
}

.finder-page .paper-date {
font-size: 11px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(96, 165, 250, 0.1);
color: var(--accent, #3b82f6);
font-weight: 500;
white-space: nowrap;
}

.finder-page .paper-access {
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
}

.finder-page .paper-access.free {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}

.finder-page .paper-access.pro {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}

/* Paper footer right group */
.finder-page .paper-footer-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

/* Card-level prompt gen button */
.finder-page .card-gen-prompt-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
font-size: 11px;
font-weight: 500;
background: transparent;
color: var(--accent, #2563eb);
border: 1px solid var(--accent, #2563eb);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
line-height: 1.4;
}
.finder-page .card-gen-prompt-btn:hover {
background: var(--accent, #2563eb);
color: #fff;
}
.finder-page .card-gen-prompt-btn svg {
flex-shrink: 0;
}

/* Card prompt gen wrapper */
.finder-page .card-prompt-gen-wrapper {
padding: 16px 20px;
border-top: 1px solid var(--content-border, #e2e8f0);
background: var(--content-subtle, #f8fafc);
border-radius: 0 0 12px 12px;
margin-top: 0;
}
.finder-page .card-prompt-gen-form {
display: flex;
flex-direction: column;
gap: 10px;
}

/* Progress and done states */
.finder-page .card-prompt-gen-progress,
.finder-page .card-prompt-gen-done {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--content-text-secondary, #64748b);
padding: 6px 0;
}
.finder-page .card-gen-timer {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 14px;
color: var(--accent, #2563eb);
font-weight: 700;
}
.finder-page .card-gen-cost {
font-size: 12px;
color: var(--accent, #2563eb);
font-weight: 600;
}

/* Global status bar (search + prompt gen) */
.finder-page .global-status-bar {
margin: 16px auto 0;
max-width: 700px;
padding: 16px 20px;
background: var(--content-subtle, #f8fafc);
border: 1px solid var(--accent, #2563eb);
border-radius: 12px;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
animation: gsbAppear 0.3s ease;
}
@keyframes gsbAppear {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.finder-page .gsb-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.finder-page .gsb-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.finder-page .gsb-text {
font-size: 14px;
font-weight: 500;
color: var(--content-text);
flex: 1;
margin-right: 16px;
transition: opacity 0.3s ease;
}
.finder-page .gsb-timer {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 28px;
font-weight: 700;
color: var(--accent, #2563eb);
letter-spacing: 2px;
flex-shrink: 0;
line-height: 1;
}
.finder-page .gsb-detail {
font-size: 13px;
color: var(--content-text-secondary, #64748b);
transition: opacity 0.3s ease;
min-height: 18px;
}
.finder-page .global-status-bar.error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
.finder-page .global-status-bar.error .gsb-timer {
color: #ef4444;
}
.finder-page .global-status-bar.error .gsb-text {
color: #ef4444;
}

/* Synthesis controls */
.finder-page .btn-synthesize {
background: #10b981;
color: white;
border: none;
padding: 14px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
width: 100%;
margin-bottom: 0;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.finder-page .btn-synthesize:hover {
transform: translateY(-2px);
background: #059669;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.finder-page .btn-synthesize:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

.finder-page .synthesis-progress {
display: none;
padding: 12px 16px;
margin-top: 10px;
font-size: 13px;
color: var(--content-text-tertiary);
line-height: 1.5;
border-left: 3px solid var(--finder-accent);
background: var(--content-bg);
border-radius: 0 8px 8px 0;
transition: opacity 0.4s ease;
}

.finder-page .synthesis-progress.visible {
display: block;
}

.finder-page .synthesis-timer {
font-size: 13px;
font-weight: 400;
opacity: 0.9;
font-variant-numeric: tabular-nums;
}

.finder-page .synthesis-meta {
display: none;
font-size: 12px;
color: var(--content-text-tertiary);
padding: 8px 0;
margin-bottom: 8px;
align-items: center;
gap: 12px;
}

.finder-page .synthesis-meta.visible {
display: flex;
}

.finder-page .synthesis-meta-text {
opacity: 0.7;
}

.finder-page .btn-download-essay {
background: var(--finder-accent);
color: #fff;
border: none;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s;
}

.finder-page .btn-download-essay:hover {
opacity: 0.85;
}

.finder-page .cost-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--content-text-tertiary);
opacity: 0.7;
white-space: nowrap;
}

.finder-page .cost-badge.actual {
opacity: 1;
color: var(--finder-accent);
}

.finder-page .synthesis-result {
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: 12px;
padding: 24px;
line-height: 1.7;
font-size: 15px;
}

.finder-page .synthesis-result h1, .finder-page .synthesis-result h2, .finder-page .synthesis-result h3 {
margin-top: 20px;
margin-bottom: 10px;
}

.finder-page .synthesis-result h2 { font-size: 20px; }
.finder-page .synthesis-result h3 { font-size: 17px; }

.finder-page .synthesis-result p { margin-bottom: 12px; }

.finder-page .synthesis-result ul, .finder-page .synthesis-result ol {
margin-bottom: 12px;
padding-left: 24px;
}

.finder-page .synthesis-result li { margin-bottom: 6px; }

.finder-page .synthesis-result code {
background: var(--finder-accent-light);
padding: 2px 6px;
border-radius: 4px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
}

.finder-page .synthesis-result pre {
background: #0f172a;
border-radius: 8px;
padding: 16px;
overflow-x: auto;
margin: 12px 0;
}

.finder-page .synthesis-result pre code {
background: none;
padding: 0;
color: #e2e8f0;
display: block;
white-space: pre-wrap;
}

.finder-page .synthesis-result blockquote {
border-left: 3px solid var(--finder-accent);
padding-left: 16px;
margin: 12px 0;
color: var(--content-text-tertiary);
}

.finder-page .synthesis-result a {
color: var(--finder-accent);
text-decoration: none;
}

.finder-page .synthesis-result a:hover { text-decoration: underline; }

/* Expansion info */
.finder-page .expansion-info {
background: var(--finder-accent-light);
border-radius: 10px;
padding: 16px;
margin-bottom: 24px;
font-size: 13px;
}

.finder-page .expansion-info summary {
cursor: pointer;
font-weight: 500;
color: var(--finder-accent);
}

.finder-page .expansion-queries {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}

.finder-page .expansion-query {
background: var(--content-bg);
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
}

/* Refinement section */
.finder-page .refine-section {
display: none;
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: 12px;
padding: 20px 24px;
margin-top: 20px;
margin-bottom: 12px;
}

.finder-page .refine-section.visible { display: block; }

.finder-page .refine-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}

.finder-page .refine-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--content-text);
}

.finder-page .refine-header .refine-hint {
font-size: 12px;
color: var(--content-text-tertiary);
}

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

.finder-page .refine-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--content-border);
background: var(--sidebar-bg);
cursor: pointer;
font-size: 13px;
color: var(--content-text-tertiary);
transition: all 0.2s;
user-select: none;
}

.finder-page .refine-chip:hover {
border-color: var(--finder-accent);
color: var(--content-text);
}

.finder-page .refine-chip.selected {
background: var(--finder-accent-light);
border-color: var(--finder-accent);
color: var(--finder-accent);
font-weight: 500;
}

.finder-page .refine-chip input[type="checkbox"] {
display: none;
}

.finder-page .refine-chip .chip-check {
width: 16px;
height: 16px;
border: 1.5px solid var(--content-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}

.finder-page .refine-chip.selected .chip-check {
background: var(--finder-accent);
border-color: var(--finder-accent);
}

.finder-page .refine-chip.selected .chip-check::after {
content: '';
width: 8px;
height: 5px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg) translateY(-1px);
}

.finder-page .refine-actions {
display: flex;
gap: 12px;
align-items: center;
}

.finder-page .btn-refine {
background: var(--finder-accent);
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}

.finder-page .btn-refine:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.finder-page .btn-refine:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

.finder-page .refine-timer {
font-size: 13px;
font-weight: 400;
opacity: 0.9;
font-variant-numeric: tabular-nums;
}

.finder-page .refine-count {
font-size: 12px;
color: var(--content-text-tertiary);
}

/* Refined results badge */
.finder-page .refined-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: 4px;
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
margin-left: 8px;
}

.finder-page .refined-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 16px;
font-size: 13px;
color: var(--content-text-tertiary);
font-weight: 500;
}

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

/* Query ID */
.finder-page .query-id-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--content-text-tertiary);
background: var(--finder-accent-light);
padding: 3px 10px;
border-radius: 6px;
font-family: 'IBM Plex Mono', monospace;
cursor: pointer;
transition: opacity 0.2s;
}

.finder-page .query-id-badge:hover {
opacity: 0.8;
}

.finder-page .query-id-badge .copy-hint {
font-size: 10px;
opacity: 0.6;
}

/* Synthesis error/retry */
.finder-page .synthesis-error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 10px;
padding: 16px 20px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.finder-page .synthesis-error-text {
font-size: 14px;
color: var(--content-text);
}

.finder-page .btn-retry {
background: var(--finder-accent);
color: white;
border: none;
padding: 8px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}

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

/* Footer */

/* Tabs */
.finder-page .finder-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--content-border);
margin-bottom: 24px;
position: sticky;
top: 52px;
z-index: 50;
background: var(--sidebar-bg, #f8fafc);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
padding: 8px 0 0 0;
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}

/* Bottom CTA */
.finder-page .bottom-cta {
margin-top: 32px;
padding: 20px;
text-align: center;
}

.finder-page .bottom-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px;
border: 1px dashed var(--content-border);
border-radius: 12px;
background: var(--content-subtle, rgba(96, 165, 250, 0.03));
}

.finder-page .bottom-cta-label {
font-size: 14px;
color: var(--content-text-secondary);
}

.finder-page .bottom-cta-btn {
padding: 12px 32px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--finder-accent, #60a5fa), #a78bfa);
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}

.finder-page .bottom-cta-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.3);
}

.finder-page .tab-btn {
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
color: var(--content-text-tertiary);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}

.finder-page .tab-btn:hover { color: var(--content-text); }

.finder-page .tab-btn.active {
color: var(--finder-accent);
border-bottom-color: var(--finder-accent);
}

.finder-page .tab-count {
font-size: 12px;
background: var(--finder-accent-light);
color: var(--finder-accent);
padding: 2px 8px;
border-radius: 10px;
}

.finder-page .tab-cost {
font-size: 11px;
color: var(--content-text-tertiary);
opacity: 0.7;
}

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

/* Essay controls container */
.finder-page .essay-controls {
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Model selector */
.finder-page .model-selector {
margin-bottom: 0;
}

.finder-page .model-selector > label {
font-size: 13px;
color: var(--content-text-tertiary);
margin-bottom: 8px;
display: block;
}

.finder-page .model-options {
display: flex;
gap: 12px;
}

.finder-page .model-option {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 2px solid var(--content-border);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
flex: 1;
background: var(--content-bg);
}

.finder-page .model-option:hover { border-color: var(--finder-accent); }

.finder-page .model-option.selected {
border-color: var(--finder-accent);
background: var(--finder-accent-light);
}

.finder-page .model-option input[type="radio"] { display: none; }

.finder-page .model-name { font-weight: 600; font-size: 14px; }
.finder-page .model-cost { font-size: 12px; color: var(--content-text-tertiary); margin-left: auto; }

/* Synthesis mode selector */
.finder-page .synthesis-mode-selector {
    margin-bottom: 0;
}
.finder-page .synthesis-mode-selector > label {
    font-size: 13px;
    color: var(--content-text-tertiary);
    margin-bottom: 8px;
    display: block;
}
.finder-page .mode-chips {
    display: flex;
    gap: 10px;
}
.finder-page .mode-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--content-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
    background: var(--content-bg);
    font-size: 14px;
    font-weight: 500;
}
.finder-page .mode-chip:hover { border-color: var(--finder-accent); }
.finder-page .mode-chip.selected {
    border-color: var(--finder-accent);
    background: var(--finder-accent-light);
    font-weight: 600;
}
.finder-page .mode-chip input[type="radio"] { display: none; }

/* ===== PROMPT DEPTH TOGGLE ===== */
.finder-page .prompt-depth-toggle { margin-top: 0; }
.finder-page .prompt-depth-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
}
.finder-page .prompt-depth-label input { display: none; }
.finder-page .toggle-switch {
    width: 36px;
    height: 20px;
    background: var(--content-border, #d1d5db);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.finder-page .toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.finder-page .prompt-depth-label input:checked + .toggle-switch {
    background: var(--accent);
}
.finder-page .prompt-depth-label input:checked + .toggle-switch::after {
    transform: translateX(16px);
}
.finder-page .toggle-text { color: var(--content-text); font-weight: 500; }
.finder-page .toggle-hint { color: var(--content-text-secondary, #6b7280); font-size: 11px; }

.finder-page .essay-waiting {
padding: 20px;
text-align: center;
color: var(--content-text-tertiary);
font-size: 14px;
border: 1px dashed var(--content-border);
border-radius: 10px;
margin-bottom: 0;
}

/* ===== HINTS CAROUSEL ===== */
.finder-page .hints-carousel-wrapper {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.finder-page .hints-carousel {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.finder-page .hints-track {
    display: flex;
    gap: 10px;
    width: max-content;
    will-change: transform;
}

.finder-page .hints-track.scrolling {
    animation: hintsScroll linear infinite;
}

@keyframes hintsScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.finder-page .carousel-hint {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--content-text-tertiary);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}

.finder-page .carousel-hint:hover {
    background: var(--finder-accent);
    border-color: var(--finder-accent);
    color: white;
    transform: scale(1.04);
}

/* "All examples" button */
.finder-page .hints-show-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--content-text-tertiary);
    background: transparent;
    border: 1px solid var(--content-border);
    cursor: pointer;
    transition: all 0.2s;
}

.finder-page .hints-show-all-btn:hover {
    color: var(--finder-accent);
    border-color: var(--finder-accent);
    background: var(--finder-accent-light);
}

/* Collapsed state: hide carousel, only show "all examples" button */
.finder-page .hints-carousel-wrapper.collapsed .hints-carousel {
    display: none;
}

.finder-page .hints-carousel-wrapper.collapsed {
    margin-bottom: 16px;
}

/* ===== HINTS MODAL ===== */
.finder-page .hints-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.finder-page .hints-modal-overlay.active {
    display: flex;
}

.finder-page .hints-modal {
    background: var(--content-bg);
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--content-border);
}

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

.finder-page .hints-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--content-text);
    margin: 0;
}

.finder-page .hints-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--content-subtle, var(--content-bg));
    color: var(--content-text-tertiary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.finder-page .hints-modal-close:hover {
    background: var(--content-border);
    color: var(--content-text);
}

.finder-page .hints-modal-subtitle {
    padding: 8px 24px 16px;
    font-size: 13px;
    color: var(--content-text-tertiary);
    margin: 0;
}

.finder-page .hints-modal-grid {
    padding: 0 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.finder-page .hints-modal-category {
}

.finder-page .hints-modal-cat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--content-text-tertiary);
    margin-bottom: 8px;
    padding-left: 4px;
}

.finder-page .hints-modal-cat-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finder-page .hints-modal-item {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--content-text-secondary, var(--content-text));
    background: var(--content-subtle, rgba(0,0,0,0.03));
    border: 1px solid var(--content-border);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.finder-page .hints-modal-item:hover {
    background: var(--finder-accent);
    border-color: var(--finder-accent);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Prominent history link */
.finder-page .finder-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--finder-accent);
    background: var(--finder-accent-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
    text-decoration: none;
    transition: all 0.2s;
}

.finder-page .finder-history-btn:hover {
    background: var(--finder-accent);
    color: white;
    border-color: var(--finder-accent);
}

:root[data-theme="dark"] .finder-page .finder-history-btn {
    border-color: rgba(96, 165, 250, 0.25);
}

/* ===== PAPER INCLUDE/EXCLUDE TOGGLE ===== */
.finder-page .paper-card {
    position: relative;
    padding-left: 40px;
}

.finder-page .paper-include-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 2;
    padding: 4px;
    display: flex;
    align-items: center;
}

.finder-page .paper-include-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--finder-accent);
    cursor: pointer;
    margin: 0;
}

.finder-page .paper-include-toggle .toggle-check { display: none; }

.finder-page .paper-card.excluded {
    opacity: 0.35;
    border-style: dashed;
}

.finder-page .paper-card.excluded .paper-card-title a {
    text-decoration: line-through;
    color: var(--content-text-tertiary);
}

.finder-page .included-papers-count {
    font-size: 12px;
    color: var(--content-text-tertiary);
    margin-top: -8px;
    display: block;
    text-align: center;
}

/* ===== REFINEMENT FORM ===== */
.finder-page .refinement-form {
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--content-subtle, rgba(0,0,0,0.02));
    border: 1px solid var(--content-border);
    border-radius: 12px;
}

.finder-page .refinement-form-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--content-text);
}

.finder-page .refinement-form-header p {
    font-size: 13px;
    color: var(--content-text-tertiary);
    margin: 0 0 12px 0;
}

.finder-page .refinement-textarea {
    width: 100%;
    min-height: 72px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--content-border);
    border-radius: 8px;
    background: var(--content-bg);
    color: var(--content-text);
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.finder-page .refinement-textarea:focus {
    outline: none;
    border-color: var(--finder-accent);
    box-shadow: 0 0 0 3px var(--finder-accent-light);
}

.finder-page .refinement-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.finder-page .btn-refine-v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--finder-accent);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.finder-page .btn-refine-v2:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.finder-page .btn-refine-v2:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.finder-page .btn-refine-v2 .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ===== ITERATION 2 SECTION ===== */
.finder-page .iteration-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--finder-accent);
}

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

.finder-page .iteration2-papers-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text-secondary);
    margin-bottom: 12px;
}

.finder-page .iteration2-card {
    border-left: 3px solid rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.03);
}

.finder-page .iteration2-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    margin-left: 8px;
    vertical-align: middle;
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
.finder-page .finder-hero h1 { font-size: 22px; }
.finder-page .finder-main { padding: 20px 16px; }
.finder-page .btn-find { width: 100%; justify-content: center; }
.finder-page .search-cost-hint { justify-content: center; }
.finder-page .paper-card-header { flex-direction: column; padding-left: 28px; }
.finder-page .paper-scores { align-self: flex-start; }
.finder-page .model-options { flex-direction: column; }
.finder-page .mode-chips { flex-direction: column; }
.finder-page .tab-btn { padding: 10px 16px; font-size: 14px; }
.finder-page .finder-tabs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.finder-page .carousel-hint { font-size: 12px; padding: 6px 12px; }
.finder-page .hints-modal { max-width: 95vw; max-height: 85vh; }
.finder-page .hints-modal-grid { gap: 6px; }
.finder-page .hints-modal-item { font-size: 12px; padding: 8px 12px; }

/* Paper cards */
.finder-page .paper-card { padding: 14px; padding-left: 36px; }
.finder-page .paper-card-reason { font-size: 13px; }
.finder-page .score-badge { padding: 4px 10px; min-height: 28px; display: inline-flex; align-items: center; }
.finder-page .paper-include-toggle { top: 8px; left: 8px; padding: 8px; }

/* Paper card footer — wrap on tablet */
.finder-page .paper-card-footer { flex-wrap: wrap; gap: 8px; }

/* Results header — wrap */
.finder-page .results-header { flex-wrap: wrap; gap: 8px; }
.finder-page .results-header h2 { font-size: 18px; }

/* Refine header — stack on tablet */
.finder-page .refine-header { flex-direction: column; align-items: flex-start; gap: 4px; }

/* Refine actions — full width button */
.finder-page .refine-actions { flex-direction: column; align-items: stretch; }
.finder-page .btn-refine { width: 100%; justify-content: center; }

/* Synthesis error — stack */
.finder-page .synthesis-error { flex-direction: column; text-align: center; gap: 12px; }
.finder-page .btn-retry { width: 100%; }

/* Cost tooltip — center on mobile to avoid overflow */
.finder-page .cost-hint-label .cost-tooltip { right: auto; left: 50%; transform: translateX(-50%); }
.finder-page .cost-hint-label .cost-tooltip::after { right: auto; left: 50%; transform: translateX(-50%); }

/* Card prompt gen — adapt padding */
.finder-page .card-prompt-gen-wrapper { padding: 12px 14px; }

/* Global status bar */
.finder-page .global-status-bar { padding: 14px 16px; }

/* Synthesis readability */
.finder-page .synthesis-result { font-size: 15px; line-height: 1.7; }
.finder-page .synthesis-result h1 { font-size: 20px; }
.finder-page .synthesis-result h2 { font-size: 18px; }
.finder-page .synthesis-result h3 { font-size: 16px; }
.finder-page .synthesis-result pre { font-size: 12px; overflow-x: auto; }

/* Refinement form */
.finder-page .refinement-form { padding: 16px; margin-top: 24px; }
.finder-page .refinement-textarea { min-height: 60px; font-size: 14px; }
.finder-page .btn-refine-v2 { width: 100%; justify-content: center; }
}

/* ===== RESPONSIVE: 480px (small phones) ===== */
@media (max-width: 480px) {
.finder-page .finder-hero h1 { font-size: 20px; }
.finder-page .finder-hero p { font-size: 13px; }
.finder-page .finder-main { padding: 16px 12px; }

/* Paper cards compact */
.finder-page .paper-card { padding: 12px; padding-left: 36px; }
.finder-page .paper-card-title { font-size: 14px; }
.finder-page .paper-scores { flex-direction: row; gap: 6px; }
.finder-page .score-badge { font-size: 12px; padding: 3px 8px; }
.finder-page .paper-include-toggle { top: 6px; left: 6px; padding: 6px; }
.finder-page .paper-include-toggle input[type="checkbox"] { width: 16px; height: 16px; }

/* Paper card footer — full stack */
.finder-page .paper-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
.finder-page .paper-footer-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.finder-page .card-gen-prompt-btn { flex: 0 0 auto; }

/* Tags */
.finder-page .paper-tags { gap: 4px; }
.finder-page .paper-tag { font-size: 11px; padding: 2px 6px; }

/* Tabs full width */
.finder-page .finder-tabs { gap: 0; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
.finder-page .tab-btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 13px; }

/* Model options */
.finder-page .model-option { padding: 8px 12px; }
.finder-page .model-name { font-size: 13px; }
.finder-page .model-cost { font-size: 11px; }

/* Hints modal bottom sheet */
.finder-page .hints-modal { max-height: 90vh; border-radius: 16px 16px 0 0; }
.finder-page .hints-modal-overlay { align-items: flex-end; padding: 0; }

/* Synthesis */
.finder-page .synthesis-result { font-size: 14px; padding: 16px; }
.finder-page .synthesis-result pre { padding: 12px; }
.finder-page .synthesis-meta { flex-direction: column; gap: 8px; align-items: flex-start; }

/* Global status bar compact */
.finder-page .global-status-bar { padding: 12px 14px; }
.finder-page .gsb-timer { font-size: 22px; letter-spacing: 1px; }
.finder-page .gsb-text { font-size: 13px; margin-right: 10px; }
.finder-page .gsb-detail { font-size: 12px; }

/* Essay controls compact */
.finder-page .essay-controls { gap: 12px; }

/* Refine section compact */
.finder-page .refine-section { padding: 14px 16px; }
.finder-page .refine-chip { padding: 5px 10px; font-size: 12px; }
.finder-page .refine-chips { gap: 6px; }

/* Refinement form compact */
.finder-page .refinement-form { padding: 14px; margin-top: 16px; }
.finder-page .refinement-form-header h3 { font-size: 15px; }

/* Bottom CTA compact */
.finder-page .bottom-cta { padding: 12px 0; margin-top: 20px; }
.finder-page .bottom-cta-inner { padding: 16px; }
.finder-page .bottom-cta-btn { padding: 10px 24px; font-size: 14px; }

/* Card prompt gen compact */
.finder-page .card-prompt-gen-wrapper { padding: 10px 12px; }
.finder-page .inline-gen-model { padding: 6px 10px; font-size: 12px; }
.finder-page .inline-gen-start-btn { font-size: 12px; }

/* Prompt gen modal — bottom sheet */
.finder-page .prompt-gen-modal-overlay { align-items: flex-end; padding: 0; }
.finder-page .prompt-gen-modal { border-radius: 16px 16px 0 0; max-height: 92vh; width: 100%; }
.finder-page .prompt-gen-modal-header { padding: 12px 14px 8px; }
.finder-page .prompt-gen-modal-body { padding: 12px 14px; }
.finder-page .prompt-gen-modal-actions { padding: 8px 14px 12px; gap: 6px; }
.finder-page .prompt-gen-action-btn { padding: 8px 14px; font-size: 12px; flex: 1; text-align: center; justify-content: center; }

/* Results header */
.finder-page .results-header h2 { font-size: 16px; }
.finder-page .results-meta { font-size: 11px; }
}

/* ===== HERO ACTIONS ===== */
.finder-page .finder-hero-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.finder-page .finder-howitworks-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--content-text-tertiary);
    background: transparent;
    border: 1px solid var(--content-border);
    cursor: pointer;
    transition: all 0.2s;
}

.finder-page .finder-howitworks-btn:hover {
    color: var(--finder-accent);
    border-color: var(--finder-accent);
    background: var(--finder-accent-light);
}

:root[data-theme="dark"] .finder-page .finder-howitworks-btn {
    border-color: rgba(96, 165, 250, 0.2);
    color: var(--content-text-tertiary);
}

:root[data-theme="dark"] .finder-page .finder-howitworks-btn:hover {
    color: var(--finder-accent);
    border-color: var(--finder-accent);
    background: var(--finder-accent-light);
}

/* ===== HOW IT WORKS MODAL ===== */
.finder-page .hiw-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 2500;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px;
    overflow-y: auto;
}

.finder-page .hiw-overlay.active {
    display: flex;
}

.finder-page .hiw-modal {
    background: var(--content-bg);
    border-radius: 16px;
    max-width: 780px;
    width: 100%;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--content-border);
    margin-bottom: 40px;
}

.finder-page .hiw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 0;
}

.finder-page .hiw-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--content-text);
    margin: 0;
}

.finder-page .hiw-subtitle {
    padding: 8px 28px 20px;
    font-size: 14px;
    color: var(--content-text-tertiary);
    margin: 0;
    line-height: 1.5;
}

.finder-page .hiw-body {
    padding: 0 28px 28px;
}

/* Intro text */
.finder-page .hiw-intro {
    font-size: 15px;
    line-height: 1.7;
    color: var(--content-text-secondary, var(--content-text));
    margin-bottom: 28px;
    padding: 16px 20px;
    background: var(--finder-accent-light);
    border-radius: 10px;
    border-left: 3px solid var(--finder-accent);
}

/* Pipeline */
.finder-page .hiw-pipeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin-bottom: 32px;
}

/* Vertical connector line */
.finder-page .hiw-pipeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, var(--finder-accent), rgba(168, 85, 247, 0.5), var(--finder-accent));
    opacity: 0.3;
}

.finder-page .hiw-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    position: relative;
}

.finder-page .hiw-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--content-subtle, #f1f5f9);
    border: 2px solid var(--content-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--finder-accent);
    z-index: 1;
}

.finder-page .hiw-step.hiw-step-accent .hiw-step-num {
    background: var(--finder-accent);
    border-color: var(--finder-accent);
    color: white;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.35);
}

.finder-page .hiw-step-content {
    flex: 1;
    padding-top: 2px;
}

.finder-page .hiw-step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 2px;
}

.finder-page .hiw-step-model {
    font-size: 11px;
    font-weight: 500;
    color: var(--finder-accent);
    background: var(--finder-accent-light);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-family: 'IBM Plex Mono', monospace;
}

.finder-page .hiw-step-content p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--content-text-secondary, var(--content-text));
    margin: 0 0 8px 0;
}

.finder-page .hiw-step-content strong {
    color: var(--content-text);
    font-weight: 600;
}

.finder-page .hiw-step-detail {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.finder-page .hiw-technique {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.08);
    color: #a855f7;
    white-space: nowrap;
}

:root[data-theme="dark"] .finder-page .hiw-technique {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

/* Technique links (clickable, open research page) */
a.hiw-technique-link {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

a.hiw-technique-link:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
}

:root[data-theme="dark"] a.hiw-technique-link:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.4);
}

/* Stats grid */
.finder-page .hiw-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.finder-page .hiw-stat {
    text-align: center;
    padding: 16px 8px;
    background: var(--content-subtle, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--content-border);
}

.finder-page .hiw-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--finder-accent);
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.2;
}

.finder-page .hiw-stat-label {
    font-size: 11px;
    color: var(--content-text-tertiary);
    margin-top: 4px;
    line-height: 1.3;
}

/* Papers section */
.finder-page .hiw-papers-section {
    margin-bottom: 28px;
}

.finder-page .hiw-papers-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 6px;
}

.finder-page .hiw-papers-desc {
    font-size: 13px;
    color: var(--content-text-tertiary);
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.finder-page .hiw-papers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.finder-page .hiw-paper-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--content-subtle, rgba(0,0,0,0.02));
    border: 1px solid var(--content-border);
    font-size: 13px;
    line-height: 1.5;
}

.finder-page .hiw-paper-id {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--finder-accent);
    background: var(--finder-accent-light);
    padding: 2px 6px;
    border-radius: 4px;
}

.finder-page .hiw-paper-text {
    color: var(--content-text-secondary, var(--content-text));
}

.finder-page .hiw-paper-text strong {
    color: var(--content-text);
}

/* Paper item as link */
a.hiw-paper-link {
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

a.hiw-paper-link:hover {
    background: var(--finder-accent-light);
    border-color: var(--finder-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

a.hiw-paper-link:hover .hiw-paper-id {
    background: var(--finder-accent);
    color: white;
}

a.hiw-paper-link:hover .hiw-paper-text {
    color: var(--content-text);
}

/* Calibration section */
.finder-page .hiw-calibration {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(37, 99, 235, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 12px;
}

.finder-page .hiw-calibration-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 6px;
}

.finder-page .hiw-calibration p {
    font-size: 13px;
    color: var(--content-text-secondary, var(--content-text));
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.finder-page .hiw-calibration-scores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.finder-page .hiw-cal-score {
    text-align: center;
    padding: 12px 8px;
    background: var(--content-bg);
    border-radius: 8px;
    border: 1px solid var(--content-border);
}

.finder-page .hiw-cal-value {
    font-size: 26px;
    font-weight: 800;
    color: #10b981;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.2;
}

.finder-page .hiw-cal-max {
    font-size: 14px;
    font-weight: 500;
    color: var(--content-text-tertiary);
}

.finder-page .hiw-cal-label {
    font-size: 11px;
    color: var(--content-text-tertiary);
    margin-top: 2px;
}

.finder-page .hiw-calibration-note {
    font-size: 12px !important;
    color: var(--content-text-tertiary) !important;
    font-style: italic;
    margin: 0 !important;
}

/* HIW responsive 768px */
@media (max-width: 768px) {
    .finder-page .hiw-overlay { padding: 16px; }
    .finder-page .hiw-modal { max-width: 100%; }
    .finder-page .hiw-header { padding: 20px 20px 0; }
    .finder-page .hiw-header h3 { font-size: 18px; }
    .finder-page .hiw-subtitle { padding: 8px 20px 16px; font-size: 13px; }
    .finder-page .hiw-body { padding: 0 20px 20px; }
    .finder-page .hiw-stats { grid-template-columns: repeat(2, 1fr); }
    .finder-page .hiw-calibration-scores { grid-template-columns: repeat(2, 1fr); }
    .finder-page .hiw-step-title { font-size: 15px; }
    .finder-page .hiw-step-content p { font-size: 13px; }
}

@media (max-width: 480px) {
    .finder-page .hiw-overlay { padding: 0; align-items: flex-end; }
    .finder-page .hiw-modal { border-radius: 16px 16px 0 0; max-height: 95vh; overflow-y: auto; margin-bottom: 0; }
    .finder-page .hiw-header { padding: 16px 16px 0; }
    .finder-page .hiw-header h3 { font-size: 17px; }
    .finder-page .hiw-subtitle { padding: 6px 16px 12px; }
    .finder-page .hiw-body { padding: 0 16px 16px; }
    .finder-page .hiw-intro { font-size: 13px; padding: 12px 14px; }
    .finder-page .hiw-pipeline::before { left: 15px; }
    .finder-page .hiw-step-num { width: 32px; height: 32px; font-size: 14px; }
    .finder-page .hiw-step { gap: 12px; padding: 12px 0; }
    .finder-page .hiw-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .finder-page .hiw-stat { padding: 10px 6px; }
    .finder-page .hiw-stat-value { font-size: 20px; }
    .finder-page .hiw-calibration-scores { grid-template-columns: repeat(2, 1fr); }
    .finder-page .hiw-cal-value { font-size: 22px; }
    .finder-page .hiw-paper-item { flex-direction: column; gap: 4px; }
    .finder-page .hiw-technique { font-size: 9px; }
}

/* ===== SEARCH HISTORY BADGES ===== */
.generation-type.type-search { background: #dbeafe; color: #1d4ed8; }
.generation-type.type-essay { background: #d1fae5; color: #065f46; }
:root[data-theme="dark"] .generation-type.type-search { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
:root[data-theme="dark"] .generation-type.type-essay { background: rgba(16, 185, 129, 0.2); color: #34d399; }

/* ===== INLINE PROMPT GENERATION ===== */

.finder-page .inline-prompt-gen {
    margin: 12px 0 16px;
}

.finder-page .inline-prompt-gen-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.finder-page .inline-prompt-gen-btn:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-1px);
}

.finder-page .inline-prompt-gen-form {
    margin-top: 8px;
    padding: 12px;
    background: var(--content-subtle, #f8fafc);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    max-width: 400px;
}
.finder-page .inline-gen-models {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}
.finder-page .inline-gen-model {
    flex: 1;
    padding: 8px 12px;
    background: var(--content-bg, #fff);
    border: 1.5px solid var(--content-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.finder-page .inline-gen-model input { display: none; }
.finder-page .inline-gen-model.selected {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
}
:root[data-theme="dark"] .finder-page .inline-gen-model.selected {
    background: rgba(96, 165, 250, 0.1);
}
.finder-page .inline-gen-model small {
    color: var(--content-text-secondary, #6b7280);
    font-size: 11px;
}

.finder-page .inline-gen-details {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--content-border);
    border-radius: 7px;
    background: var(--content-bg, #fff);
    color: var(--content-text);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0;
    font-family: inherit;
    box-sizing: border-box;
}
.finder-page .inline-gen-details::placeholder {
    color: var(--content-text-tertiary, #9ca3af);
}

.finder-page .inline-gen-start-btn {
    width: 100%;
    padding: 8px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}
.finder-page .inline-gen-start-btn:hover {
    background: var(--accent-hover, #1d4ed8);
}

.finder-page .inline-prompt-gen-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--content-text-secondary, #6b7280);
}
.finder-page .inline-gen-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--content-border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.finder-page .inline-prompt-gen-done {
    margin-top: 4px;
}
.finder-page .inline-gen-view-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}
.finder-page .inline-gen-view-btn:hover {
    background: var(--accent-hover, #1d4ed8);
    transform: translateY(-1px);
}

/* ===== PROMPT GEN RESULT MODAL ===== */

.finder-page .prompt-gen-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.finder-page .prompt-gen-modal-overlay.active {
    display: flex;
}
.finder-page .prompt-gen-modal {
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    max-width: 820px;
    width: 92%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.finder-page .prompt-gen-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--content-border);
}
.finder-page .prompt-gen-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.finder-page .prompt-gen-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--content-text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.finder-page .prompt-gen-modal-close:hover {
    background: var(--content-subtle);
}
.finder-page .prompt-gen-modal-meta {
    padding: 8px 24px;
    font-size: 12px;
    color: var(--content-text-secondary);
    border-bottom: 1px solid var(--content-border);
}
.finder-page .prompt-gen-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.finder-page .prompt-gen-modal-actions {
    display: flex;
    gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--content-border);
}
.finder-page .prompt-gen-action-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--content-border);
    background: var(--content-bg);
    color: var(--content-text);
    transition: all 0.2s;
}
.finder-page .prompt-gen-copy-btn {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.finder-page .prompt-gen-copy-btn:hover {
    background: var(--accent-hover, #1d4ed8);
}
.finder-page .prompt-gen-download-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Prompt code block inside modal */
.finder-page .prompt-gen-prompt-block {
    margin-bottom: 20px;
}
.finder-page .prompt-gen-prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #1e293b;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
}
.finder-page .prompt-gen-prompt-header span {
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.finder-page .prompt-gen-prompt-header button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 4px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}
.finder-page .prompt-gen-prompt-block pre {
    background: #0f172a;
    border-radius: 0 0 10px 10px;
    padding: 16px;
    margin: 0;
    overflow-x: auto;
}
.finder-page .prompt-gen-prompt-block code {
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.65;
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
}

.finder-page .prompt-gen-explanation {
    margin-top: 16px;
}
.finder-page .prompt-gen-explanation h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--content-text);
}
.finder-page .prompt-gen-explanation p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--content-text-secondary);
}
.finder-page .prompt-gen-explanation ul,
.finder-page .prompt-gen-explanation ol {
    padding-left: 20px;
    margin: 8px 0;
}
.finder-page .prompt-gen-explanation li {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--content-text-secondary);
}
.finder-page .prompt-gen-explanation pre {
    overflow-x: auto;
    max-width: 100%;
    background: #0f172a;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
}
.finder-page .prompt-gen-explanation code {
    word-break: break-word;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.finder-page .prompt-gen-explanation pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    display: block;
    white-space: pre-wrap;
}
.finder-page .prompt-gen-explanation h1,
.finder-page .prompt-gen-explanation h2,
.finder-page .prompt-gen-explanation h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--content-text);
}
.finder-page .prompt-gen-modal-body {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile */
@media (max-width: 768px) {
    .finder-page .prompt-gen-modal {
        width: 96%;
        max-height: 90vh;
        border-radius: 12px;
    }
    .finder-page .prompt-gen-modal-header { padding: 14px 16px 10px; }
    .finder-page .prompt-gen-modal-body { padding: 14px 16px; }
    .finder-page .prompt-gen-modal-actions { padding: 10px 16px 14px; flex-wrap: wrap; }
    .finder-page .prompt-gen-action-btn { flex: 1; text-align: center; }
    .finder-page .inline-gen-models { flex-direction: column; }
    .finder-page .inline-prompt-gen-form { max-width: 100%; }
}

/* --- Balance badge --- */
.finder-page .finder-balance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--finder-accent-light, rgba(37, 99, 235, 0.08));
    border: 1px solid var(--accent, #2563eb);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #2563eb);
    white-space: nowrap;
}
.finder-page .finder-balance-badge #balanceAmount {
    font-variant-numeric: tabular-nums;
}
.finder-page .balance-topup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--accent, #2563eb);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.15s;
}
.finder-page .balance-topup:hover {
    transform: scale(1.15);
}
/* Search history section link (profile page) */
.profile-page .profile-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}
.profile-page .profile-section-link:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

/* Empty state CTA link */
.profile-page .profile-empty-state a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}
.profile-page .profile-empty-state a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}


/* ============================================================

/* ============================================================
   PROMPT BOOST PAGE STYLES
   Scoped under .boost-page
   Appended to nova_research.css after finder section
   ============================================================ */

/* --- Body --- */
body.boost-page {
    padding-top: 52px;
}

/* --- Layout --- */
.boost-page .boost-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
}

/* --- Hero --- */
.boost-page .boost-hero {
    margin-bottom: 28px;
}

.boost-page .boost-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.boost-page .boost-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--content-text);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.boost-page .boost-subtitle {
    font-size: 14px;
    color: var(--content-text-secondary, #6b7280);
    margin: 0;
}

.boost-page .boost-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.boost-page .boost-balance-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--content-subtle, #f0f4ff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #2563eb);
    white-space: nowrap;
}

.boost-page .balance-topup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent, #2563eb);
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

.boost-page .balance-topup:hover {
    background: var(--accent-hover, #1d4ed8);
    transform: scale(1.1);
}

/* --- Input Section --- */
.boost-page .boost-input-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.boost-page .boost-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.boost-page .boost-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.boost-page .boost-label-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--content-text-secondary, #6b7280);
}

.boost-page .boost-textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--content-text);
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 10px;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.boost-page .boost-textarea:focus {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.boost-page .boost-textarea-large {
    min-height: 200px;
    max-height: 500px;
}

.boost-page .boost-textarea-small {
    min-height: 50px;
    max-height: 150px;
}

.boost-page .boost-char-counter {
    font-size: 12px;
    color: var(--content-text-secondary, #6b7280);
    text-align: right;
    margin-top: -4px;
}

.boost-page .boost-char-counter.near-limit {
    color: #ef4444;
    font-weight: 600;
}

/* --- Model Selector --- */
.boost-page .boost-model-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.boost-page .boost-model-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
}

.boost-page .boost-model-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.boost-page .boost-model-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--content-bg, #fff);
}

.boost-page .boost-model-option:hover {
    border-color: var(--accent, #2563eb);
}

.boost-page .boost-model-option.selected {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.05);
    box-shadow: 0 0 0 1px var(--accent, #2563eb);
}

.boost-page .boost-model-option input[type="radio"] {
    display: none;
}

.boost-page .boost-model-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--content-text);
}

.boost-page .boost-model-cost {
    font-size: 12px;
    color: var(--content-text-secondary, #6b7280);
    background: var(--content-subtle, #f3f4f6);
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- Boost Button --- */
.boost-page .boost-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: white;
    background: var(--accent, #2563eb);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.boost-page .boost-btn:hover:not(:disabled) {
    background: var(--accent-hover, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.boost-page .boost-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.boost-page .boost-cost-hint {
    font-size: 12px;
    color: var(--content-text-secondary, #6b7280);
    text-align: center;
    margin-top: -4px;
}

/* --- Status Bar --- */
.boost-page .boost-status-bar {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--content-subtle, #f0f4ff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 10px;
    border-left: 3px solid var(--accent, #2563eb);
}

.boost-page .boost-status-bar.error {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.boost-page .boost-status-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boost-page .boost-status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--content-text);
}

.boost-page .boost-status-bar.error .boost-status-text {
    color: #ef4444;
}

.boost-page .boost-status-timer {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #2563eb);
    font-variant-numeric: tabular-nums;
}

.boost-page .boost-status-detail {
    font-size: 12px;
    color: var(--content-text-secondary, #6b7280);
    margin-top: 2px;
}

/* --- Results --- */
.boost-page .boost-results {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Analysis badge */
.boost-page .boost-analysis-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--content-subtle, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--content-border, #e5e7eb);
}

.boost-page .boost-analysis-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.boost-page .boost-analysis-text {
    font-size: 13px;
    color: var(--content-text-secondary, #6b7280);
    line-height: 1.4;
}

/* Section blocks */
.boost-page .boost-section {
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.boost-page .boost-section-highlight {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 1px var(--accent, #2563eb), 0 4px 12px rgba(37, 99, 235, 0.08);
}

.boost-page .boost-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--content-text);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.boost-page .boost-section-title svg {
    color: var(--accent, #2563eb);
    flex-shrink: 0;
}

/* Section content (rendered markdown) */
.boost-page .boost-section-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--content-text);
}

.boost-page .boost-section-content h2 {
    display: none; /* Hide the ## header since we already have section title */
}

.boost-page .boost-section-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--content-text);
}

.boost-page .boost-section-content p {
    margin: 0 0 10px;
}

.boost-page .boost-section-content ul,
.boost-page .boost-section-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.boost-page .boost-section-content li {
    margin-bottom: 6px;
}

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

.boost-page .boost-section-content a {
    color: var(--accent, #2563eb);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.boost-page .boost-section-content a:hover {
    border-bottom-color: var(--accent, #2563eb);
}

.boost-page .boost-section-content code {
    font-size: 13px;
    padding: 2px 6px;
    background: var(--content-subtle, #f1f5f9);
    border-radius: 4px;
    font-family: monospace;
}

.boost-page .boost-section-content pre {
    background: #0f172a;
    border-radius: 8px;
    padding: 14px;
    overflow-x: auto;
    margin: 10px 0;
}

.boost-page .boost-section-content pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* --- Improved Prompt Block --- */
.boost-page .boost-improved-block {
    background: #0f172a;
    border-radius: 10px;
    overflow: hidden;
}

.boost-page .boost-improved-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #1e293b;
}

.boost-page .boost-improved-label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boost-page .boost-copy-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: white;
    background: var(--accent, #2563eb);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.boost-page .boost-copy-btn:hover {
    background: var(--accent-hover, #1d4ed8);
}

.boost-page .boost-copy-btn.copied {
    background: #10b981;
}

.boost-page .boost-improved-text {
    margin: 0;
    padding: 16px;
    color: #e2e8f0;
    font-family: 'Inter', monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 500px;
    overflow-y: auto;
}

/* --- Prompt Tabs (Improved / Formatted) --- */
.boost-page .boost-prompt-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--content-subtle, #f1f5f9);
    padding: 3px;
    border-radius: 8px;
}

.boost-page .boost-prompt-tab {
    flex: 1;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--content-text-secondary, #64748b);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.boost-page .boost-prompt-tab:hover {
    color: var(--content-text, #1e293b);
    background: rgba(255, 255, 255, 0.5);
}

.boost-page .boost-prompt-tab.active {
    color: var(--accent, #2563eb);
    background: var(--content-bg, white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .boost-page .boost-prompt-tabs {
    background: var(--content-muted, #252529);
}

:root[data-theme="dark"] .boost-page .boost-prompt-tab:hover {
    color: var(--content-text, #e2e8f0);
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .boost-page .boost-prompt-tab.active {
    color: var(--accent, #60a5fa);
    background: var(--content-subtle, #1c1c21);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Research Papers Grid --- */
.boost-page .boost-papers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.boost-page .boost-paper-card {
    display: block;
    padding: 12px 14px;
    background: var(--content-subtle, #f8fafc);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}

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

.boost-page .boost-paper-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--content-text);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.boost-page .boost-paper-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.boost-page .boost-paper-rating {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    color: white;
}

.boost-page .boost-paper-cap {
    font-size: 11px;
    color: var(--content-text-secondary, #6b7280);
    background: var(--content-bg, #fff);
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- Meta Info --- */
.boost-page .boost-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 12px 0;
    font-size: 12px;
    color: var(--content-text-secondary, #6b7280);
    border-top: 1px solid var(--content-border, #e5e7eb);
    flex-wrap: wrap;
}

.boost-page .boost-meta span {
    white-space: nowrap;
}

.boost-page .boost-meta-id {
    font-family: monospace;
    font-size: 11px;
    color: var(--content-text-secondary, #9ca3af);
    background: var(--content-subtle, #f3f4f6);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.boost-page .boost-meta-id:hover {
    color: var(--accent, #2563eb);
}

/* --- Balance Modal --- */
.boost-page .boost-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boost-page .boost-modal {
    background: var(--content-bg, #fff);
    border-radius: 14px;
    padding: 28px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.boost-page .boost-modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--content-text);
}

.boost-page .boost-modal p {
    font-size: 14px;
    color: var(--content-text-secondary, #6b7280);
    margin: 0 0 20px;
    line-height: 1.5;
}

.boost-page .boost-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.boost-page .boost-modal-btn-primary {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: var(--accent, #2563eb);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.boost-page .boost-modal-btn-primary:hover {
    background: var(--accent-hover, #1d4ed8);
}

.boost-page .boost-modal-btn-secondary {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--content-text-secondary, #6b7280);
    background: var(--content-subtle, #f3f4f6);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

/* --- Clarifying Questions Section --- */
.boost-page .boost-questions {
    margin: 16px 0;
    padding: 24px;
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.boost-page .boost-questions-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.boost-page .boost-questions-header svg {
    color: var(--accent, #2563eb);
    flex-shrink: 0;
    margin-top: 2px;
}

.boost-page .boost-questions-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--content-text);
    margin: 0 0 4px 0;
}

.boost-page .boost-questions-subtitle {
    font-size: 13px;
    color: var(--content-text-secondary, #6b7280);
    margin: 0;
    line-height: 1.4;
}

.boost-page .boost-question {
    padding: 16px;
    background: var(--content-subtle, #f8fafc);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 12px;
}

.boost-page .boost-question:last-of-type {
    margin-bottom: 0;
}

.boost-page .boost-question-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.boost-page .boost-question-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.boost-page .boost-option-chip {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: var(--content-text);
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.boost-page .boost-option-chip:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}

.boost-page .boost-option-chip.active {
    background: var(--accent, #2563eb);
    color: white;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.boost-page .boost-question-custom {
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--content-text);
    background: var(--content-bg, #fff);
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.boost-page .boost-question-custom:focus {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.boost-page .boost-question-custom::placeholder {
    color: var(--content-text-secondary, #9ca3af);
}

.boost-page .boost-skip-btn {
    display: block;
    margin: 12px auto 0;
    padding: 8px 20px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--content-text-secondary, #6b7280);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.boost-page .boost-skip-btn:hover {
    color: var(--content-text);
}

/* --- Refinement Section --- */
.boost-page .boost-refinement {
    margin-top: 32px;
    padding: 20px;
    background: var(--content-bg, #ffffff);
    border: 1px dashed var(--content-border, #e5e7eb);
    border-radius: 12px;
}

.boost-page .boost-refinement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--content-text, #1e293b);
}

.boost-page .boost-refinement-header svg {
    color: var(--accent, #2563eb);
    flex-shrink: 0;
}

.boost-page .boost-btn-refine {
    margin-top: 12px;
    background: var(--content-subtle, #f8fafc);
    color: var(--accent, #2563eb);
    border: 1px solid var(--accent, #2563eb);
}

.boost-page .boost-btn-refine:hover {
    background: var(--accent, #2563eb);
    color: white;
}

/* --- Dark Mode Overrides --- */
:root[data-theme="dark"] .boost-page .boost-textarea {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .boost-page .boost-model-option {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-model-option.selected {
    background: rgba(96, 165, 250, 0.1);
}

:root[data-theme="dark"] .boost-page .boost-model-cost {
    background: var(--content-muted, #252529);
}

:root[data-theme="dark"] .boost-page .boost-section {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-section-highlight {
    border-color: var(--accent, #60a5fa);
    box-shadow: 0 0 0 1px var(--accent, #60a5fa), 0 4px 12px rgba(96, 165, 250, 0.08);
}

:root[data-theme="dark"] .boost-page .boost-section-content code {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

:root[data-theme="dark"] .boost-page .boost-refinement {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-btn-refine {
    background: transparent;
    color: var(--accent, #60a5fa);
    border-color: var(--accent, #60a5fa);
}

:root[data-theme="dark"] .boost-page .boost-btn-refine:hover {
    background: var(--accent, #60a5fa);
    color: white;
}

:root[data-theme="dark"] .boost-page .boost-questions {
    background: var(--content-bg, #19191d);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-question {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-option-chip {
    background: var(--content-muted, #252529);
    border-color: var(--content-border, #27272a);
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .boost-page .boost-option-chip:hover {
    border-color: var(--accent, #60a5fa);
    color: var(--accent, #60a5fa);
    background: rgba(96, 165, 250, 0.1);
}

:root[data-theme="dark"] .boost-page .boost-option-chip.active {
    background: var(--accent, #60a5fa);
    color: white;
    border-color: var(--accent, #60a5fa);
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.3);
}

:root[data-theme="dark"] .boost-page .boost-question-custom {
    background: var(--content-muted, #252529);
    border-color: var(--content-border, #27272a);
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .boost-page .boost-skip-btn {
    color: var(--content-text-secondary, #6b7280);
}

:root[data-theme="dark"] .boost-page .boost-skip-btn:hover {
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .boost-page .boost-analysis-badge {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-paper-card {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-paper-cap {
    background: var(--content-muted, #252529);
}

:root[data-theme="dark"] .boost-page .boost-status-bar {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-modal {
    background: var(--content-bg, #19191d);
    border: 1px solid var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-balance-badge {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .boost-page .boost-main {
        padding: 16px 14px 40px;
    }

    .boost-page .boost-title {
        font-size: 22px;
    }

    .boost-page .boost-hero-top {
        flex-direction: column;
        gap: 12px;
    }

    .boost-page .boost-model-options {
        flex-direction: column;
        width: 100%;
    }

    .boost-page .boost-model-option {
        width: 100%;
        justify-content: space-between;
    }

    .boost-page .boost-papers-grid {
        grid-template-columns: 1fr;
    }

    .boost-page .boost-questions {
        padding: 16px;
    }

    .boost-page .boost-question {
        padding: 12px;
    }

    .boost-page .boost-option-chip {
        padding: 6px 12px;
        font-size: 12px;
    }

    .boost-page .boost-section {
        padding: 14px;
    }

    .boost-page .boost-improved-text {
        font-size: 12px;
        max-height: 400px;
    }

    .boost-page .boost-meta {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .boost-page .boost-title {
        font-size: 20px;
    }

    .boost-page .boost-textarea-large {
        min-height: 150px;
    }
}

/* ============================================================
   PEEM RUBRIC - Prompt Diagnostic Scores
   Append to nova_research.css (inside .boost-page scope)
   ============================================================ */

/* Rubric container */
.boost-page .boost-rubric {
    background: var(--content-subtle, #f8fafc);
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.boost-page .boost-rubric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.boost-page .boost-rubric-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text, #1e293b);
}

.boost-page .boost-rubric-avg {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.boost-page .boost-rubric-avg.rubric-score-good {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.boost-page .boost-rubric-avg.rubric-score-mid {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
.boost-page .boost-rubric-avg.rubric-score-low {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Grid: 2 columns on desktop, 1 on mobile */
.boost-page .boost-rubric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}
@media (max-width: 600px) {
    .boost-page .boost-rubric-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Individual criterion item */
.boost-page .boost-rubric-item {
    cursor: default;
}
.boost-page .boost-rubric-item.rubric-item-weak {
    /* subtle left accent for weak criteria */
}

.boost-page .boost-rubric-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.boost-page .boost-rubric-name {
    font-size: 12px;
    color: var(--content-text-secondary, #64748b);
    font-weight: 500;
}

.boost-page .boost-rubric-score {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}
.boost-page .boost-rubric-score.rubric-bar-good {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}
.boost-page .boost-rubric-score.rubric-bar-mid {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}
.boost-page .boost-rubric-score.rubric-bar-low {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Progress bar */
.boost-page .boost-rubric-bar-bg {
    height: 6px;
    background: var(--content-border, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.boost-page .boost-rubric-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}
.boost-page .boost-rubric-bar.rubric-bar-good {
    background: linear-gradient(90deg, #10b981, #34d399);
}
.boost-page .boost-rubric-bar.rubric-bar-mid {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.boost-page .boost-rubric-bar.rubric-bar-low {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* ===== DARK THEME ===== */
:root[data-theme="dark"] .boost-page .boost-rubric {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .boost-page .boost-rubric-title {
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .boost-page .boost-rubric-name {
    color: var(--content-text-secondary, #a1a1aa);
}

:root[data-theme="dark"] .boost-page .boost-rubric-bar-bg {
    background: var(--content-muted, #252529);
}

:root[data-theme="dark"] .boost-page .boost-rubric-avg.rubric-score-good {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
:root[data-theme="dark"] .boost-page .boost-rubric-avg.rubric-score-mid {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
:root[data-theme="dark"] .boost-page .boost-rubric-avg.rubric-score-low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

:root[data-theme="dark"] .boost-page .boost-rubric-score.rubric-bar-good {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
:root[data-theme="dark"] .boost-page .boost-rubric-score.rubric-bar-mid {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
:root[data-theme="dark"] .boost-page .boost-rubric-score.rubric-bar-low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ============================================ */
/* STEP 1/2 UX FLOW (19.03.2026)               */
/* ============================================ */

/* Tab step number circle */
.finder-page .tab-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--content-border);
    color: var(--content-text-secondary);
    flex-shrink: 0;
    transition: all 0.2s;
}

.finder-page .tab-btn.active .tab-step-num {
    background: var(--accent, #2563eb);
    color: #fff;
}

/* Results step label */
.finder-page .results-step-label {
    color: var(--accent, #2563eb);
    font-weight: 700;
    margin-right: 4px;
}

/* Step recommendation block */
.finder-page .step-recommendation {
    margin-top: 32px;
    border: 1px solid var(--accent, #2563eb);
    border-radius: 14px;
    overflow: hidden;
    background: var(--content-bg, #fff);
}

.finder-page .step-rec-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(167, 139, 250, 0.06));
    border-bottom: 1px solid var(--content-border);
}

.finder-page .step-rec-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    flex-shrink: 0;
}

.finder-page .step-rec-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--content-text);
}

.finder-page .step-rec-subtitle {
    font-size: 13px;
    color: var(--content-text-secondary);
    margin-top: 2px;
}

.finder-page .step-rec-body {
    padding: 20px 22px;
}

.finder-page .step-rec-next {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.finder-page .step-rec-next-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    background: var(--accent, #2563eb);
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.finder-page .step-rec-next-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 6px;
}

.finder-page .step-rec-next-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--content-text-secondary);
}

.finder-page .step-rec-btn {
    display: block;
    width: calc(100% - 44px);
    margin: 0 22px 20px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #2563eb), #7c3aed);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
}

.finder-page .step-rec-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.35);
}

/* Dark theme */
:root[data-theme="dark"] .finder-page .step-recommendation {
    border-color: rgba(96, 165, 250, 0.3);
    background: var(--content-subtle, #1c1c21);
}

:root[data-theme="dark"] .finder-page .step-rec-header {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(167, 139, 250, 0.08));
    border-bottom-color: var(--content-border);
}

:root[data-theme="dark"] .finder-page .step-rec-btn {
    background: linear-gradient(135deg, #3b82f6, #7c3aed);
}

/* Mobile */
@media (max-width: 768px) {
    .finder-page .step-recommendation {
        margin-top: 24px;
    }
    .finder-page .step-rec-header {
        padding: 14px 16px;
    }
    .finder-page .step-rec-body {
        padding: 16px;
    }
    .finder-page .step-rec-btn {
        width: calc(100% - 32px);
        margin: 0 16px 16px;
        padding: 12px 20px;
        font-size: 15px;
    }
    .finder-page .step-rec-next-desc {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .finder-page .tab-step-num {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .finder-page .step-rec-check {
        width: 30px;
        height: 30px;
    }
    .finder-page .step-rec-check svg {
        width: 16px;
        height: 16px;
    }
    .finder-page .step-rec-next-num {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

/* ============================================ */
/* STEP 1 HINT + STEP 2 INTRO (19.03.2026 v2)  */
/* ============================================ */

/* Step 1: hint text under results header */
.finder-page .step1-hint {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--content-subtle, #f8fafc);
    border-left: 3px solid var(--accent, #2563eb);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--content-text-secondary);
}

.finder-page .step1-hint p {
    margin: 0;
}

.finder-page .step1-hint a {
    color: var(--accent, #2563eb);
    text-decoration: none;
}

.finder-page .step1-hint a:hover {
    text-decoration: underline;
}

.finder-page .step1-hint strong {
    color: var(--content-text);
    font-weight: 600;
}

/* Step 2: intro block inside essay tab */
.finder-page .step2-intro {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(124, 58, 237, 0.04));
    border: 1px solid var(--content-border);
    border-radius: 12px;
}

.finder-page .step2-intro-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 8px;
}

.finder-page .step2-intro-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--content-text-secondary);
    margin: 0 0 18px 0;
}

/* Format comparison cards */
.finder-page .step2-formats {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

.finder-page .step2-format {
    padding: 14px 16px;
    background: var(--content-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--content-border);
}

.finder-page .step2-format-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--content-text);
    margin-bottom: 6px;
}

.finder-page .step2-format-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--content-text-secondary);
}

.finder-page .step2-format-divider {
    width: 1px;
    background: var(--content-border);
    margin: 8px 16px;
    align-self: stretch;
}

/* Dark theme */
:root[data-theme="dark"] .finder-page .step1-hint {
    background: var(--content-subtle, #1c1c21);
    border-left-color: var(--accent, #60a5fa);
}

:root[data-theme="dark"] .finder-page .step2-intro {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.06), rgba(167, 139, 250, 0.06));
    border-color: var(--content-border);
}

:root[data-theme="dark"] .finder-page .step2-format {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border);
}

/* Mobile */
@media (max-width: 768px) {
    .finder-page .step1-hint {
        font-size: 13px;
        padding: 10px 14px;
        margin-bottom: 16px;
    }

    .finder-page .step2-intro {
        padding: 16px;
        margin-bottom: 20px;
    }

    .finder-page .step2-formats {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .finder-page .step2-format-divider {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }
}

/* === Profile: Пополнить N-токены button (added 01.05.2026) === */
.profile-page .profile-topup-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2563eb 0%, #667eea 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
}
.profile-page .profile-topup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
    text-decoration: none !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
}
.profile-page .profile-topup-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2.5;
}
.profile-page .profile-topup-btn-hint {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    opacity: 0.85;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
:root[data-theme="dark"] .profile-page .profile-topup-btn {
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.22);
}
:root[data-theme="dark"] .profile-page .profile-topup-btn:hover {
    box-shadow: 0 6px 16px rgba(96, 165, 250, 0.4);
}
@media (max-width: 480px) {
    .profile-page .profile-topup-btn {
        flex-wrap: wrap;
        gap: 8px;
    }
    .profile-page .profile-topup-btn-hint {
        margin-left: 26px;
        flex-basis: 100%;
        opacity: 0.75;
    }
}


/* Row card */
.profile-page .nthx-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 14px 16px;
    background: var(--content-subtle, #fafafa);
    border: 1px solid var(--content-border, #e4e4e7);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.profile-page .nthx-row:hover {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}

/* Tokens block (left) */
.profile-page .nthx-tokens-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 16px;
    border-right: 1px solid var(--content-border, #e4e4e7);
}
.profile-page .nthx-tokens {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent, #2563eb);
    line-height: 1;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
}
.profile-page .nthx-tokens-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--content-text-tertiary, #71717a);
    margin-top: 4px;
}

/* Info block (right) */
.profile-page .nthx-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.profile-page .nthx-info-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-page .nthx-amount {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--content-text, #18181b);
    font-feature-settings: 'tnum' 1;
}
.profile-page .nthx-method {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-text-secondary, #52525b);
    background: var(--content-bg, #fff);
    padding: 2px 8px;
    border: 1px solid var(--content-border, #e4e4e7);
    border-radius: 4px;
    line-height: 1.3;
}
.profile-page .nthx-info-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--content-text-tertiary, #71717a);
    line-height: 1.4;
}
.profile-page .nthx-date {
    font-feature-settings: 'tnum' 1;
}
.profile-page .nthx-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.3;
    flex-shrink: 0;
}
.profile-page .nthx-status-ok {
    background: rgba(34, 197, 94, 0.10);
    color: #16a34a;
}
.profile-page .nthx-meta {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--content-border, #e4e4e7);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--content-text-muted, #94a3b8);
    line-height: 1.5;
}
.profile-page .nthx-order code,
.profile-page .nthx-receipt code {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--content-bg, #fff);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--content-text-secondary, #52525b);
    border: 1px solid var(--content-border, #e4e4e7);
}
.profile-page .nthx-receipt {
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--content-text-tertiary, #71717a);
    font-style: italic;
}

/* Dark theme */
:root[data-theme="dark"] .profile-page .nthx-row {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}
:root[data-theme="dark"] .profile-page .nthx-method,
:root[data-theme="dark"] .profile-page .nthx-order code,
:root[data-theme="dark"] .profile-page .nthx-receipt code {
    background: var(--content-bg, #19191d);
    border-color: var(--content-border, #27272a);
}

/* Mobile */
@media (max-width: 480px) {
    .profile-page .nthx-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 14px;
    }
    .profile-page .nthx-tokens-block {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--content-border, #e4e4e7);
    }
    .profile-page .nthx-tokens { font-size: 20px; }
    .profile-page .nthx-info-top { flex-direction: column; align-items: flex-start; }
}

/* === Profile: N-tokens purchase history (compact 01.05.2026) === */
.profile-page .ntokens-history-card {
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--content-border, #e2e8f0);
}
.profile-page .ntokens-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.profile-page .ntokens-history-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--content-text-tertiary, #71717a);
    line-height: 1.4;
}
.profile-page .ntokens-history-toggle {
    background: none;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent, #2563eb);
    border-radius: 4px;
    transition: background-color .15s;
}
.profile-page .ntokens-history-toggle:hover {
    background: var(--accent-light, rgba(37, 99, 235, 0.08));
}
.profile-page .ntokens-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact row */
.profile-page .nthx-row {
    display: grid;
    grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--content-subtle, #fafafa);
    border: 1px solid var(--content-border, #e4e4e7);
    border-radius: 8px;
    transition: border-color .15s;
}
.profile-page .nthx-row:hover {
    border-color: var(--accent, #2563eb);
}
.profile-page .nthx-row.nthx-collapsed { display: none; }

.profile-page .nthx-tokens {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent, #2563eb);
    line-height: 1;
    font-feature-settings: 'tnum' 1;
}
.profile-page .nthx-tokens-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--content-text-tertiary, #71717a);
    margin-left: 4px;
}
.profile-page .nthx-amount {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--content-text, #18181b);
    font-feature-settings: 'tnum' 1;
}
.profile-page .nthx-method {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-text-secondary, #52525b);
    background: var(--content-bg, #fff);
    padding: 1px 6px;
    border: 1px solid var(--content-border, #e4e4e7);
    border-radius: 3px;
    margin-left: 6px;
    line-height: 1.3;
    display: inline-block;
}
.profile-page .nthx-date {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--content-text-tertiary, #71717a);
    font-feature-settings: 'tnum' 1;
}
.profile-page .nthx-status-ok {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(34, 197, 94, 0.10);
    color: #16a34a;
    line-height: 1.3;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Expanded details — second line below the row when row is "expanded" via summary toggle */
.profile-page .nthx-details {
    display: none;
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px dashed var(--content-border, #e4e4e7);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--content-text-tertiary, #71717a);
    line-height: 1.55;
}
.profile-page .nthx-row.nthx-show-details .nthx-details { display: block; }
.profile-page .nthx-details code {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--content-bg, #fff);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--content-border, #e4e4e7);
    color: var(--content-text-secondary, #52525b);
}

/* Dark theme */
:root[data-theme="dark"] .profile-page .nthx-row {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}
:root[data-theme="dark"] .profile-page .nthx-method,
:root[data-theme="dark"] .profile-page .nthx-details code {
    background: var(--content-bg, #19191d);
    border-color: var(--content-border, #27272a);
}

/* Mobile */
@media (max-width: 600px) {
    .profile-page .nthx-row {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 9px 10px;
    }
    .profile-page .nthx-method-cell { display: none; }
    .profile-page .nthx-tokens-label { display: none; }
}


/* === Profile cost display (per generation/search) === */
.profile-page .profile-generation-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.profile-page .profile-generation-cost .cost-nt {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent, #2563eb);
    font-feature-settings: 'tnum' 1;
    line-height: 1.1;
}
.profile-page .profile-generation-cost .cost-usd {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--content-text-tertiary, #71717a);
    font-feature-settings: 'tnum' 1;
}
.profile-page .profile-generation-cost .cost-breakdown {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--content-text-muted, #94a3b8);
    margin-top: 2px;
}


/* === Profile: compact search-history card (01.05.2026) === */
.profile-page .profile-generation-card.sh-compact {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-page .profile-generation-card.sh-compact:hover {
    border-color: var(--accent, #2563eb);
}
.profile-page .sh-compact-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.profile-page .sh-compact-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 3px;
    line-height: 1.4;
    flex-shrink: 0;
}
.profile-page .sh-compact-tag.tag-search {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}
.profile-page .sh-compact-tag.tag-essay {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}
.profile-page .sh-compact-query {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 14px;
    color: var(--content-text, #18181b);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.profile-page .sh-compact-row2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.profile-page .sh-compact-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--content-text-tertiary, #71717a);
    font-feature-settings: 'tnum' 1;
}
.profile-page .sh-compact-cost {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #2563eb);
    font-feature-settings: 'tnum' 1;
}

:root[data-theme="dark"] .profile-page .sh-compact-tag.tag-essay {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
}