/**
 * Page-specific Styles - Author Portal
 * Стили для конкретных страниц
 */

/* Header */
.header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-4);
}

.header__inner {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.header__logo {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: 0.05em;
    font-size: 0;
}

.header__logo svg {
    max-width: 160px;
    max-height: 52px;
}

.header__logo svg path {
    fill: var(--color-primary);
}

.header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    margin-left: 15.7rem;
}

.header__nav-item {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

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

.header__nav-item.is-active {
    color: var(--color-primary);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
}

.header__burger {
    display: none;
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

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

.search-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--spacing-4);
    transform: translateY(-100%);
    transition: transform var(--transition-normal);
}

.search-overlay.is-open + .search-container,
.search-container.is-open {
    transform: translateY(0);
}

.search-container.is-open {
    visibility: visible;
    opacity: 1;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    max-width: var(--container-max);
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-lg);
    border: none;
    background: transparent;
    outline: none;
}

.search-results {
    max-width: var(--container-max);
    margin: var(--spacing-4) auto 0;
    max-height: 60vh;
    overflow-y: auto;
}

.search-results__group {
    margin-bottom: var(--spacing-4);
}

.search-results__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

.search-results__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.search-results__item:hover {
    background-color: var(--color-bg-secondary);
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: var(--spacing-4);
}

.sidebar-nav__section {
    margin-bottom: var(--spacing-6);
}

.sidebar-nav__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
    padding: 0 var(--spacing-3);
}

.sidebar-nav__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.sidebar-nav__item:hover {
    color: var(--color-text);
    background-color: var(--color-bg-tertiary);
}

.sidebar-nav__item.is-active {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.sidebar-nav__icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

/* Footer */
.footer {
    padding: var(--spacing-8) 0;
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-8);
}

.footer__brand {
    max-width: 300px;
}

.footer__logo {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-3);
}

.footer__logo svg {
    max-width: 160px;
    max-height: 52px;
}

.footer__logo svg path {
    fill: var(--color-primary);
}

.footer__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.footer__links {
    display: flex;
    gap: var(--spacing-12);
}

.footer__column {
    min-width: 120px;
}

.footer__column-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

.footer__link {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.footer__link:hover {
    color: var(--color-primary);
}

.footer__features-menu {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.footer__features-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
}

.footer__features-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4) var(--spacing-6);
}

.footer__features-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__features-link:hover {
    color: var(--color-primary);
}

.footer__bottom {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Hero Section */
.hero {
    padding: var(--spacing-16) 0;
    text-align: center;
}

.hero__title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-8);
}

/* Book Cover Card */
.book-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.book-card__cover {
    position: relative;
    aspect-ratio: 2/3;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.book-card__cover-link {
    display: block;
    width: 100%;
    height: 100%;
}

.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.book-card:hover .book-card__cover img {
    transform: scale(1.05);
}

.book-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--color-bg-tertiary);
}

.book-card__badges {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    gap: var(--spacing-1);
    z-index: 2;
}

.book-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-md);
    font-size: 12px;
}

.book-card__badge--premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.book-card__edit {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    text-decoration: none;
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: 3;
}

.book-card:hover .book-card__edit {
    opacity: 1;
}

.book-card__edit:hover {
    background: var(--color-primary);
    transform: scale(1.1);
}

.book-card__actions {
    position: absolute;
    bottom: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    gap: var(--spacing-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2;
}

.book-card:hover .book-card__actions {
    opacity: 1;
}

.book-card__action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.book-card__action:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.book-card__action.is-active {
    background: var(--color-primary);
}

.book-card__action-icon {
    font-size: 14px;
}

.book-card__action-count {
    font-size: 11px;
}

.book-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.book-card__title-link {
    text-decoration: none;
    color: inherit;
}

.book-card__title-link:hover .book-card__title {
    color: var(--color-primary);
}

.book-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.book-card__author {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.book-card__author:hover {
    color: var(--color-primary);
}

.book-card__universe {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-top: var(--spacing-1);
}

.book-card__universe:hover {
    color: var(--color-primary);
}

.book-card__meta {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.book-card__rating {
    color: var(--color-text-secondary);
}

.book-card__stat {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Book card sizes */
.book-card--sm .book-card__cover {
    aspect-ratio: 2/3;
}

.book-card--lg .book-card__title {
    font-size: var(--font-size-base);
}

/* Mobile Navigation - Hidden by default */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    z-index: var(--z-modal);
    padding: var(--spacing-4);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

/* Mobile styles - Улучшенная версия */
@media (max-width: 1024px) {
    .header__nav {
        display: none;
    }
    
    .header__burger {
        display: flex;
    }
    
    .mobile-nav {
        display: block;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0 var(--spacing-3);
    }
    
    .footer__inner {
        flex-direction: column;
    }
    
    .footer__links {
        flex-wrap: wrap;
        gap: var(--spacing-6);
    }
}


/* Book Header */
.book-header {
    display: flex;
    gap: var(--spacing-8);
    padding: var(--spacing-6) 0;
}

.book-header__cover {
    flex-shrink: 0;
}

.book-header__cover .book-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
}

.book-header__info {
    flex: 1;
}

.book-header__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-3);
}

.book-header__author {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
}

.book-header__author:hover {
    color: var(--color-primary);
}

.book-header__description {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

.book-header__stats {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.book-header__stat {
    text-align: center;
}

.book-header__stat-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.book-header__stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.book-header__actions {
    display: flex;
    gap: var(--spacing-3);
}

/* Chapters List */
.chapters-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--transition-fast);
}

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

.chapter-item:hover {
    background-color: var(--color-bg-secondary);
}

.chapter-item__number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

.chapter-item__info {
    flex: 1;
    min-width: 0;
}

.chapter-item__title {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.chapter-item__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.chapter-item__arrow {
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.chapter-item:hover .chapter-item__arrow {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* Author Card Stats */
.author-card__stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.author-card__stat {
    text-align: center;
}

.author-card__stat-value {
    display: block;
    font-weight: var(--font-weight-semibold);
}

.author-card__stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Article Card */
.article-card--horizontal {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.article-card--horizontal:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.article-card__image {
    position: relative;
    width: 200px;
    height: 120px;
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.article-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.article-card:hover .article-card__image img {
    transform: scale(1.05);
}

.article-card__badge {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-md);
    font-size: 12px;
    z-index: 2;
}

.article-card__badge--premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.article-card__badge--draft {
    background: rgba(107, 114, 128, 0.9);
    width: auto;
    padding: 0 var(--spacing-2);
    font-size: 11px;
    font-weight: 500;
}

.article-card__badge--scheduled {
    background: rgba(59, 130, 246, 0.9);
    width: auto;
    padding: 0 var(--spacing-2);
    font-size: 11px;
    font-weight: 500;
}

/* Unpublished article styling */
.article-card--unpublished {
    opacity: 0.6;
    border-style: dashed;
}

.article-card--unpublished:hover {
    opacity: 0.8;
}

.article-card__edit {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    text-decoration: none;
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: 3;
}

.article-card:hover .article-card__edit {
    opacity: 1;
}

.article-card__edit:hover {
    background: var(--color-primary);
    transform: scale(1.1);
}

.article-card__actions {
    position: absolute;
    bottom: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    gap: var(--spacing-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2;
}

.article-card:hover .article-card__actions {
    opacity: 1;
}

.article-card__action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.article-card__action:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.article-card__action.is-active {
    background: var(--color-primary);
}

.article-card__action-icon {
    font-size: 14px;
}

.article-card__action-count {
    font-size: 11px;
}

.article-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.article-card__title-link {
    text-decoration: none;
    color: inherit;
}

.article-card__title-link:hover .article-card__title {
    color: var(--color-primary);
}

.article-card__title {
    font-weight: var(--font-weight-semibold);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.article-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: auto;
}

.article-card__author {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.article-card__author:hover {
    color: var(--color-primary);
}

.article-card__separator {
    color: var(--color-text-muted);
}

.article-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--color-bg-tertiary);
}

/* Vertical article card */
.article-card--vertical {
    flex-direction: column;
}

.article-card--vertical .article-card__image {
    width: 100%;
    height: 150px;
}

/* Universe Card */
.universe-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--color-bg-tertiary);
}

.universe-card__stats {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Responsive Book Header */
@media (max-width: 768px) {
    .book-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .book-header__stats {
        justify-content: center;
    }
    
    .book-header__actions {
        justify-content: center;
    }
}


/* Sidebar Box */
.sidebar-box {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.sidebar-box__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

/* Tags */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tag--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.tag__count {
    opacity: 0.7;
}

/* Articles List */
.articles-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Article Page */
.article-page__header {
    text-align: center;
    padding: var(--spacing-8) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-8);
}

.article-page__tags {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.article-page__title {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-6);
}

.article-page__meta {
    display: flex;
    justify-content: center;
}

.article-page__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text);
}

.article-page__author:hover {
    color: var(--color-primary);
}

.article-page__author-name {
    font-weight: var(--font-weight-medium);
}

.article-page__author-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Article Cover */
.article-page__cover {
    margin-bottom: var(--spacing-8);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.article-page__cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* Article Body with TOC Layout */
.article-page__body {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: var(--spacing-8);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

/* Article Content - centered column */
.article-page__content {
    min-width: 0; /* Prevent grid blowout */
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

/* Spacer for balance (hidden on smaller screens) */
.article-page__spacer {
    display: block;
}

/* Prose Content */
.prose {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.8;
}

.prose h1, .prose h2, .prose h3 {
    font-family: var(--font-family);
    margin: var(--spacing-8) 0 var(--spacing-4);
}

.prose p {
    margin-bottom: var(--spacing-4);
}

.prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: var(--spacing-4);
    margin: var(--spacing-6) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Article Footer */
.article-page__footer {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.article-page__actions {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}

/* Author Box */
.author-box {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

/* Responsive Article Layout */
@media (max-width: 1200px) {
    .article-page__body {
        grid-template-columns: 220px 1fr;
        gap: var(--spacing-6);
    }
    
    .article-page__spacer {
        display: none;
    }
}

@media (max-width: 1024px) {
    .article-page__body {
        grid-template-columns: 200px 1fr;
        gap: var(--spacing-6);
    }
}

@media (max-width: 768px) {
    .article-page__body {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
        padding: 0 var(--spacing-4);
    }
    
    .article-page__content {
        max-width: 100%;
    }
    
    .article-page__title {
        font-size: var(--font-size-3xl);
    }
    
    .prose {
        font-size: 1rem;
    }
}

.author-box__info {
    flex: 1;
}

.author-box__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.author-box__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Comments Section */
.comments-section {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-border);
}

.comments-section__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-6);
}

.comments-section__empty {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-text-muted);
}

.comments-section__login-prompt {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

.comments-section__login-prompt a {
    color: var(--color-primary);
}

/* Comments List - vertical layout */
.comments-list {
    display: flex;
    flex-direction: column;
}

/* Comment Form */
.comment-form {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}

.comment-form__input {
    flex: 1;
}

.comment-form__actions {
    margin-top: var(--spacing-2);
}

/* Comment */
.comment {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.comment:last-child {
    border-bottom: none;
}

.comment--reply {
    margin-left: 40px;
}

.comment__body {
    flex: 1;
    min-width: 0;
}

.comment__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.comment__author {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.comment__author:hover {
    color: var(--color-primary);
}

.comment__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.comment__content {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-2);
}

.comment__actions {
    display: flex;
    gap: var(--spacing-4);
}

/* Reply Form */
.reply-form {
    padding: var(--spacing-3) 0;
    margin-left: 40px;
}

.comment-form--reply {
    display: flex;
    gap: var(--spacing-3);
}

.comment-form--reply .comment-form__input {
    flex: 1;
}

.comment-form--reply .comment-form__actions {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* Comment Replies Container */
.comment-replies {
    margin-left: 40px;
}

.comment__action {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.comment__action:hover {
    color: var(--color-primary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
    color: var(--color-text-muted);
}

.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-4);
}

.empty-state__icon svg {
    width: 48px;
    height: 48px;
}

.empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

.empty-state__text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   Universe Pages
   ========================================== */

/* Page Header */
.page-header {
    text-align: center;
    padding: var(--spacing-8) 0;
    margin-bottom: var(--spacing-8);
}

.page-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-3);
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Filters */
.filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.filters__group {
    display: flex;
    gap: var(--spacing-2);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

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

.filter-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.filter-btn__arrow {
    font-size: 0.7em;
    opacity: 0.7;
}

.filters__search {
    width: 300px;
}

/* Catalog Filters (unified) */
.catalog-filters {
    margin-bottom: var(--spacing-6);
}

.catalog-filters__form {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    flex-wrap: wrap;
}

.catalog-filters__search {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
    display: flex;
    position: relative;
}

.catalog-filters__search .input {
    flex: 1;
    padding-right: var(--spacing-10);
    border-radius: var(--radius-full);
}

.catalog-filters__search-btn {
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.catalog-filters__search-btn:hover {
    background: var(--color-primary-dark);
}

.catalog-filters__dropdowns {
    display: flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.catalog-filters__clear {
    color: var(--color-text-muted);
}

.catalog-filters__clear:hover {
    color: var(--color-danger);
}

/* Universe Grid */
.universe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

/* Universe Card */
.universe-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.universe-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.universe-card__link {
    display: block;
    color: var(--color-text);
}

.universe-card__banner {
    height: 160px;
    overflow: hidden;
}

.universe-card__content {
    padding: var(--spacing-4);
}

.universe-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.universe-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.universe-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
}

.universe-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* Stat */
.stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.stat__icon {
    font-size: var(--font-size-sm);
}

.stat__value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Universe Hero */
.universe-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--spacing-8);
}

.universe-hero__banner {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.universe-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
}

.universe-hero__content {
    position: relative;
    z-index: 1;
    padding: var(--spacing-8) 0;
    max-width: 800px;
}

.universe-hero__title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.universe-hero__description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

.universe-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.universe-hero__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text);
}

.universe-hero__author:hover {
    color: var(--color-primary);
}

.universe-hero__stats {
    display: flex;
    gap: var(--spacing-4);
}

/* Universe Stats */
.universe-stats {
    padding: var(--spacing-6) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-8);
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
}

.stat-card {
    text-align: center;
    padding: var(--spacing-4) var(--spacing-6);
}

.stat-card__icon {
    font-size: 32px;
    display: block;
    margin-bottom: var(--spacing-2);
}

.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    display: block;
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-6);
}

.tab {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-content {
    display: none;
}

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

/* Books Grid */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

/* Universes Grid */
.universes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

/* Dashboard Grid - Universal Component */
.dashboard-grid {
    display: grid !important;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.dashboard-grid--2col {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important;
}

.dashboard-grid--3col {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

.dashboard-grid--4col {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

/* Grid Item Card */
.dashboard-grid__card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.dashboard-grid__card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Grid Image with different aspect ratios */
.dashboard-grid__image {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    display: block;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.dashboard-grid__image:hover {
    opacity: 0.9;
}

.dashboard-grid[data-image-ratio="16-9"] .dashboard-grid__image {
    aspect-ratio: 16 / 9;
}

.dashboard-grid[data-image-ratio="4-3"] .dashboard-grid__image {
    aspect-ratio: 4 / 3;
}

.dashboard-grid[data-image-ratio="3-4"] .dashboard-grid__image {
    aspect-ratio: 3 / 4;
}

.dashboard-grid[data-image-ratio="1-1"] .dashboard-grid__image {
    aspect-ratio: 1 / 1;
}

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

.dashboard-grid__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Grid Content */
.dashboard-grid__content {
    padding: var(--spacing-4);
}

.dashboard-grid__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    text-decoration: none;
    display: block;
    transition: color var(--transition-fast);
}

.dashboard-grid__title:hover {
    color: var(--color-primary);
}

.dashboard-grid__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-grid__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.dashboard-grid__actions {
    display: flex;
    gap: var(--spacing-2);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 1024px) {
    .dashboard-grid--2col,
    .dashboard-grid--3col,
    .dashboard-grid--4col {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-grid--2col,
    .dashboard-grid--3col,
    .dashboard-grid--4col {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Pagination */
.dashboard-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.dashboard-pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.dashboard-pagination__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.dashboard-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.dashboard-pagination__btn svg {
    width: 20px;
    height: 20px;
}

.dashboard-pagination__btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.dashboard-pagination__btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.dashboard-pagination__pages {
    display: flex;
    gap: var(--spacing-1);
}

.dashboard-pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-2);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.dashboard-pagination__page:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-text-muted);
}

.dashboard-pagination__page--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.dashboard-pagination__page--active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

@media (max-width: 768px) {
    .dashboard-pagination {
        flex-direction: column;
        text-align: center;
    }
    
    .dashboard-pagination__info {
        order: 2;
    }
    
    .dashboard-pagination__nav {
        order: 1;
    }
}

/* Encyclopedias Grid */
.encyclopedias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

/* Universe Card */
.card--universe {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    transition: all var(--transition-fast);
}

.card--universe:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card--universe .card__link {
    display: block;
    color: inherit;
}

.card--universe .card__banner {
    height: 140px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card--universe .card__banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card--universe .card__banner-placeholder {
    font-size: 3rem;
    opacity: 0.8;
}

.card--universe .card__body {
    padding: var(--spacing-4);
}

.card--universe .card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
}

.card--universe .card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.card--universe .card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.card--universe .card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.card--universe .card__author:hover {
    color: var(--color-primary);
}

.card--universe .card__stats {
    display: flex;
    gap: var(--spacing-3);
}

.card--universe .card__stat {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Maps Grid */
.maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

.map-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.map-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.map-card__preview {
    height: 160px;
}

.map-card__info {
    padding: var(--spacing-3);
}

.map-card__title {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.map-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Encyclopedia Preview */
.encyclopedia-preview {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
}

.encyclopedia-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.encyclopedia-preview__header h3 {
    font-size: var(--font-size-lg);
}

.encyclopedia-preview__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-3);
}

.category-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-card:hover {
    box-shadow: var(--shadow-sm);
}

.category-card__icon {
    font-size: var(--font-size-lg);
}

.category-card__name {
    flex: 1;
    font-size: var(--font-size-sm);
}

.category-card__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Placeholder Images */
.placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
}

.placeholder-image__icon {
    font-size: 48px;
    opacity: 0.5;
}

.placeholder-image--hero {
    background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
}

.placeholder-image--universe .placeholder-image__icon {
    font-size: 64px;
}

.placeholder-image--map .placeholder-image__icon {
    font-size: 40px;
}

/* Empty State Small */
.empty-state--sm {
    padding: var(--spacing-8) var(--spacing-4);
}

.empty-state--sm .empty-state__icon {
    font-size: 36px;
}

/* Responsive */
@media (max-width: 768px) {
    .universe-grid {
        grid-template-columns: 1fr;
    }
    
    .filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filters__search {
        width: 100%;
    }
    
    .universe-hero {
        min-height: 300px;
    }
    
    .universe-hero__title {
        font-size: var(--font-size-2xl);
    }
    
    .stats-grid {
        flex-wrap: wrap;
        gap: var(--spacing-4);
    }
    
    .stat-card {
        flex: 1;
        min-width: 100px;
    }
    
    .tabs {
        overflow-x: auto;
    }
}


/* ==========================================
   Encyclopedia Pages
   ========================================== */

/* Encyclopedia Layout */
.encyclopedia-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-8);
    min-height: calc(100vh - var(--header-height) - 200px);
}

/* Encyclopedia Sidebar */
.encyclopedia-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-4));
    height: fit-content;
    max-height: calc(100vh - var(--header-height) - var(--spacing-8));
    overflow-y: auto;
}

.encyclopedia-sidebar__header {
    margin-bottom: var(--spacing-6);
}

.encyclopedia-sidebar__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.encyclopedia-sidebar__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Encyclopedia Search */
.encyclopedia-search {
    margin-bottom: var(--spacing-6);
}

/* Encyclopedia Categories */
.encyclopedia-categories__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.encyclopedia-categories__list {
    list-style: none;
}

.encyclopedia-category {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.encyclopedia-category:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

.encyclopedia-category.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.encyclopedia-category__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.encyclopedia-category__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.encyclopedia-category__name {
    flex: 1;
}

.encyclopedia-category__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Encyclopedia Content */
.encyclopedia-content__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.encyclopedia-content__title {
    font-size: var(--font-size-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.encyclopedia-content__title svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Encyclopedia Articles Grid */
.encyclopedia-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

/* Encyclopedia Article Card */
.encyclopedia-article-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: all var(--transition-fast);
}

.encyclopedia-article-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.encyclopedia-article-card a {
    color: var(--color-text);
}

.encyclopedia-article-card__category {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.encyclopedia-article-card__category svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.encyclopedia-article-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.encyclopedia-article-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.encyclopedia-article-card__meta {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Encyclopedia Article Layout */
.encyclopedia-article-layout {
    margin: 0 auto;
}

/* Encyclopedia Article */
.encyclopedia-article {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
}

.encyclopedia-article__header {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

.encyclopedia-article__category {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.encyclopedia-article__category svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.encyclopedia-article__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
}

.encyclopedia-article__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.encyclopedia-article__content {
    line-height: var(--line-height-relaxed);
}

.encyclopedia-article__content h1 {
    font-size: var(--font-size-2xl);
    margin: var(--spacing-6) 0 var(--spacing-4);
}

.encyclopedia-article__content h2 {
    font-size: var(--font-size-xl);
    margin: var(--spacing-6) 0 var(--spacing-3);
}

.encyclopedia-article__content h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-4) 0 var(--spacing-2);
}

.encyclopedia-article__content p {
    margin-bottom: var(--spacing-4);
}

.encyclopedia-article__content ul {
    margin: var(--spacing-4) 0;
    padding-left: var(--spacing-6);
}

.encyclopedia-article__content li {
    margin-bottom: var(--spacing-2);
}

/* Wiki Links */
.prose .wiki-link,
.wiki-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 18px;
}

/* Wiki link icon */
.prose .wiki-link::before,
.wiki-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.prose .wiki-link:hover,
.wiki-link:hover {
    color: var(--color-primary-dark, #2563eb);
    text-decoration-style: solid;
}

.prose .wiki-link:hover::before,
.wiki-link:hover::before {
    opacity: 1;
}

/* Missing/Broken Wiki Links */
.prose .wiki-link--missing,
.prose .wiki-link-missing,
.wiki-link--missing,
.wiki-link-missing {
    color: var(--color-text-tertiary, #9ca3af);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    cursor: not-allowed;
    position: relative;
    padding-left: 18px;
}

/* Missing link icon */
.prose .wiki-link--missing::before,
.prose .wiki-link-missing::before,
.wiki-link--missing::before,
.wiki-link-missing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3Cline x1='3' y1='3' x2='21' y2='21'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.prose .wiki-link--missing:hover,
.prose .wiki-link-missing:hover,
.wiki-link--missing:hover,
.wiki-link-missing:hover {
    color: var(--color-text-secondary, #6b7280);
    text-decoration-style: dashed;
}

.prose .wiki-link--missing:hover::before,
.prose .wiki-link-missing:hover::before,
.wiki-link--missing:hover::before,
.wiki-link-missing:hover::before {
    opacity: 0.7;
}

/* Linked Articles */
.encyclopedia-article__links {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border);
}

.encyclopedia-article__links h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.linked-articles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.linked-article {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.linked-article:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Encyclopedia Article Sidebar */
.encyclopedia-article-sidebar {
    margin-top: var(--spacing-6);
}

.sidebar-links {
    list-style: none;
}

.sidebar-links li {
    margin-bottom: var(--spacing-2);
}

.sidebar-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

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

/* Button Block */
.btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Responsive Encyclopedia */
@media (max-width: 768px) {
    .encyclopedia-layout {
        grid-template-columns: 1fr;
    }
    
    .encyclopedia-sidebar {
        position: static;
        max-height: none;
    }
    
    .encyclopedia-articles {
        grid-template-columns: 1fr;
    }
    
    .encyclopedia-article {
        padding: var(--spacing-4);
    }
    
    .encyclopedia-article__title {
        font-size: var(--font-size-2xl);
    }
}


/* ==========================================
   Maps Pages
   ========================================== */

/* Maps List Grid */
.maps-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

/* Map List Card */
.map-list-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.map-list-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.map-list-card a {
    display: block;
    color: var(--color-text);
}

.map-list-card__preview {
    position: relative;
    height: 200px;
}

.map-list-card__type {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.map-list-card__content {
    padding: var(--spacing-4);
}

.map-list-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.map-list-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.map-list-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.map-list-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.placeholder-image--map-large {
    background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
}

.placeholder-image--map-large .placeholder-image__icon {
    font-size: 64px;
}

/* Map Editor */
.main--full {
    padding: 0;
    height: calc(100vh - var(--header-height));
}

.map-editor {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.map-editor__toolbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.map-editor__toolbar-left,
.map-editor__toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.map-editor__title {
    font-weight: var(--font-weight-semibold);
}

.map-editor__type {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.map-editor__zoom {
    font-size: var(--font-size-sm);
    min-width: 50px;
    text-align: center;
}

/* Map Canvas */
.map-editor__canvas {
    background: var(--color-bg-secondary);
    overflow: hidden;
    position: relative;
}

.map-editor__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        var(--color-bg-tertiary),
        var(--color-bg-tertiary) 10px,
        var(--color-bg-secondary) 10px,
        var(--color-bg-secondary) 20px
    );
}

.map-editor__placeholder-content {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
}

.map-editor__placeholder-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-4);
}

.map-editor__placeholder-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
}

.map-editor__placeholder-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-6);
}

.map-editor__placeholder-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.feature__icon {
    font-size: var(--font-size-lg);
}

.map-editor__placeholder-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Map Sidebar */
.map-editor__sidebar {
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
    transition: transform var(--transition-fast);
}

.map-editor__sidebar.is-hidden {
    transform: translateX(100%);
}

.map-editor__sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.map-editor__sidebar-header h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Map Tools */
.map-editor__tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.map-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-tool:hover {
    border-color: var(--color-primary);
}

.map-tool.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Map Layers */
.map-editor__layers {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.map-editor__layers h4 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.layer-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.layer-item:hover {
    background: var(--color-bg-secondary);
}

.layer-item.is-active {
    background: var(--color-primary-light);
}

.layer-item__name {
    flex: 1;
    font-size: var(--font-size-sm);
}

.layer-item__toggle {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
}

.layer-item__toggle:hover {
    opacity: 1;
}

/* Map Info */
.map-editor__info {
    padding: var(--spacing-4);
}

.map-editor__info h4 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.info-list {
    font-size: var(--font-size-sm);
}

.info-list dt {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-1);
}

.info-list dd {
    margin-bottom: var(--spacing-3);
}

/* Avatar XS */
.avatar--xs {
    width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
}

/* Responsive Maps */
@media (max-width: 768px) {
    .maps-list-grid {
        grid-template-columns: 1fr;
    }
    
    .map-editor {
        grid-template-columns: 1fr;
    }
    
    .map-editor__sidebar {
        position: fixed;
        right: 0;
        top: var(--header-height);
        bottom: 0;
        width: 280px;
        z-index: var(--z-modal);
        transform: translateX(100%);
    }
    
    .map-editor__sidebar.is-open {
        transform: translateX(0);
    }
}


/* ==========================================
   Author Profile Page
   ========================================== */

/* Author Hero */
.author-hero {
    position: relative;
    margin-bottom: var(--spacing-8);
}

.author-hero__banner {
    height: 200px;
    overflow: hidden;
}

.placeholder-image--author-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.placeholder-image--author-banner .placeholder-image__icon {
    font-size: 80px;
    opacity: 0.2;
}

.author-hero__content {
    display: flex;
    gap: var(--spacing-6);
    margin-top: calc(-1 * var(--spacing-12));
    position: relative;
    z-index: 1;
}

.author-hero__avatar {
    flex-shrink: 0;
}

.avatar--xl {
    width: 120px;
    height: 120px;
    font-size: var(--font-size-3xl);
    border: 4px solid var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.author-hero__info {
    flex: 1;
    padding-top: var(--spacing-12);
}

.author-hero__name {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-1);
}

.author-hero__username {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
}

.author-hero__bio {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
    max-width: 600px;
}

.author-hero__stats {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.author-stat {
    text-align: center;
}

.author-stat__value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.author-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.author-hero__actions {
    display: flex;
    gap: var(--spacing-3);
}

/* Author Tabs */
.author-tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-6);
    overflow-x: auto;
}

.author-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

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

.author-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.author-tab__count {
    padding: 2px 8px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

.author-tab.is-active .author-tab__count {
    background: var(--color-primary-light);
}

/* Author Tab Content */
.author-tab-content {
    min-height: 300px;
}

/* Author Calendar Preview */
.author-calendar-preview {
    max-width: 600px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.calendar-header h3 {
    font-size: var(--font-size-lg);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--spacing-6);
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.calendar-day:hover {
    background: var(--color-bg-secondary);
}

.calendar-day--header {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.calendar-day.is-today {
    background: var(--color-primary);
    color: white;
}

.calendar-day.has-event {
    position: relative;
}

.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
}

.calendar-day.is-today.has-event::after {
    background: white;
}

/* Calendar Events */
.calendar-events h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

.calendar-event {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.calendar-event__date {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    min-width: 60px;
}

.calendar-event__title {
    font-weight: var(--font-weight-medium);
}

.calendar-event__time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Author About */
.author-about {
    max-width: 700px;
}

.author-about__section {
    margin-bottom: var(--spacing-8);
}

.author-about__section h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.author-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.author-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all var(--transition-fast);
    width: fit-content;
}

.author-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Responsive Author */
@media (max-width: 768px) {
    .author-hero__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .author-hero__info {
        padding-top: var(--spacing-4);
    }
    
    .author-hero__stats {
        justify-content: center;
    }
    
    .author-hero__actions {
        justify-content: center;
    }
    
    .author-hero__bio {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================
   Calendar Page
   ========================================== */

.calendar-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

/* Calendar Controls */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.calendar-current {
    font-size: var(--font-size-xl);
    min-width: 200px;
    text-align: center;
}

.calendar-views {
    display: flex;
    gap: var(--spacing-1);
    background: var(--color-bg-secondary);
    padding: var(--spacing-1);
    border-radius: var(--radius-md);
}

.view-btn {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

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

.view-btn.is-active {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* Calendar Layout */
.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-6);
}

/* Calendar Month View */
.calendar-month {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-month__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.calendar-weekday {
    padding: var(--spacing-3);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.calendar-weekday--weekend {
    color: var(--color-text-muted);
}

.calendar-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-cell {
    min-height: 100px;
    padding: var(--spacing-2);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.calendar-cell:nth-child(7n) {
    border-right: none;
}

.calendar-cell:hover {
    background: var(--color-bg-secondary);
}

.calendar-cell--empty {
    background: var(--color-bg-secondary);
    cursor: default;
}

.calendar-cell.is-today {
    background: var(--color-primary-light);
}

.calendar-cell.is-today .calendar-cell__day {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-cell__header {
    margin-bottom: var(--spacing-2);
}

.calendar-cell__day {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.calendar-cell__events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-event-dot {
    padding: 2px 6px;
    font-size: 10px;
    color: white;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-more {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 2px 6px;
}

/* Calendar List View */
.calendar-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.calendar-list-item {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.calendar-list-item__date {
    text-align: center;
    min-width: 60px;
}

.calendar-list-item__day {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.calendar-list-item__weekday {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.calendar-list-item__content {
    flex: 1;
}

.calendar-list-item__type {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    color: white;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-2);
}

.calendar-list-item__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
}

.calendar-list-item__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.calendar-list-item__meta {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.calendar-list-item__private {
    color: var(--color-warning);
}

/* Calendar Week View */
.calendar-week {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-week__header {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
}

.calendar-week__time-column {
    padding: var(--spacing-3);
    border-right: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.calendar-week__day-header {
    padding: var(--spacing-3);
    text-align: center;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.calendar-week__day-header:last-child {
    border-right: none;
}

.calendar-week__day-header.is-weekend {
    background: var(--color-bg-secondary);
}

.calendar-week__day-header.is-today {
    background: var(--color-primary-light);
}

.calendar-week__weekday {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.calendar-week__day {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.calendar-week__day-header.is-today .calendar-week__day {
    background: var(--color-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.calendar-week__events-count {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.calendar-week__body {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    position: relative;
    min-height: 600px;
}

.calendar-week__time-column {
    border-right: 1px solid var(--color-border);
    padding: 0;
}

.calendar-week__time-slot {
    height: 60px;
    padding: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: flex-start;
    padding-top: var(--spacing-1);
}

.calendar-week__day-column {
    position: relative;
    border-right: 1px solid var(--color-border);
    min-height: 1440px;
    cursor: pointer;
}

.calendar-week__day-column:last-child {
    border-right: none;
}

.calendar-week__day-column.is-weekend {
    background: var(--color-bg-secondary);
}

.calendar-week__day-column.is-today {
    background: var(--color-primary-light);
}

.calendar-week__day-column:hover {
    background: var(--color-bg-secondary);
}

.calendar-week__event {
    position: absolute;
    left: var(--spacing-1);
    right: var(--spacing-1);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    color: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.calendar-week__event:hover {
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.calendar-week__event-time {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}

.calendar-week__event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-week__placeholder {
    color: var(--color-text-muted);
    padding: var(--spacing-8);
    text-align: center;
}

/* Calendar Sidebar */
.calendar-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.event-types-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.event-type-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.event-type-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

/* Upcoming Events */
.upcoming-event {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.upcoming-event:last-child {
    border-bottom: none;
}

.upcoming-event__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.upcoming-event__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.upcoming-event__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Text Muted */
.text-muted {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Responsive Calendar */
@media (max-width: 1024px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }
    
    .calendar-sidebar {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .calendar-sidebar .sidebar-box {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .calendar-controls {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .calendar-cell {
        min-height: 60px;
        padding: var(--spacing-1);
    }
    
    .calendar-event-dot {
        font-size: 8px;
        padding: 1px 4px;
    }
    
    .calendar-list-item {
        flex-direction: column;
    }
    
    .calendar-list-item__date {
        display: flex;
        gap: var(--spacing-2);
        align-items: baseline;
    }
}


/* ==========================================
   Text Editor
   ========================================== */

.editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.editor.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    border-radius: 0;
}

/* Editor Toolbar */
.editor__toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.editor__toolbar-group {
    display: flex;
    gap: 2px;
}

.editor__toolbar-group--right {
    margin-left: auto;
}

.editor__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.editor__tool svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

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

.editor__tool.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Editor Body */
.editor__body {
    display: flex;
    flex: 1;
    min-height: 400px;
}

.editor__input-wrapper {
    flex: 1;
    display: flex;
}

.editor__textarea {
    flex: 1;
    padding: var(--spacing-4);
    border: none;
    resize: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    background: transparent;
    outline: none;
}

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

/* Editor Preview */
.editor__preview {
    flex: 1;
    display: none;
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
}

.editor__preview.is-visible {
    display: block;
}

.editor__preview-content {
    padding: var(--spacing-4);
}

/* Editor Footer */
.editor__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
}

.editor__status {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.editor__autosave-status.is-unsaved {
    color: var(--color-warning);
}

.editor__actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Responsive Editor */
@media (max-width: 768px) {
    .editor__body {
        flex-direction: column;
    }
    
    .editor__preview {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    
    .editor__toolbar-group--right {
        margin-left: 0;
    }
}


/* ==========================================
   Dashboard
   ========================================== */

/* Dashboard Layout */
.dashboard-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-8);
    min-height: calc(100vh - var(--header-height) - 200px);
}

/* Dashboard Content */
.dashboard-content {
    min-width: 0;
    /*padding-top: var(--spacing-6);*/
    position: relative;
}

/* Dashboard Welcome */
.dashboard-welcome {
    margin-bottom: var(--spacing-8);
}

.dashboard-welcome h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
}

.dashboard-welcome p {
    color: var(--color-text-secondary);
}

/* Dashboard Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.dashboard-stat-card__icon {
    font-size: 32px;
}

.dashboard-stat-card__value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.dashboard-stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Stat Card (without icon) */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.stat-card__content {
    width: 100%;
}

.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    display: block;
    margin-bottom: var(--spacing-1);
    color: var(--color-text);
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Stat Card Compact (with icon) */
.stat-card--compact {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--spacing-3);
    gap: var(--spacing-3);
}

.stat-card--compact .stat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card--compact .stat-card__content {
    flex: 1;
    min-width: 0;
}

.stat-card--compact .stat-card__value {
    font-size: var(--font-size-xl);
    margin-bottom: 0;
}

.stat-card--compact .stat-card__label {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-1);
}

.stats-grid--compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-3);
}

/* Dashboard Section */
.dashboard-section {
    margin-bottom: var(--spacing-8);
}

.dashboard-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.dashboard-section__title {
    font-size: var(--font-size-lg);
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-3);
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.quick-action:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.quick-action__icon {
    font-size: 32px;
}

.quick-action__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

/* Dashboard List */
.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dashboard-list-item__icon {
    font-size: var(--font-size-xl);
}

.dashboard-list-item__date {
    text-align: center;
    min-width: 50px;
}

.dashboard-list-item__day {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.dashboard-list-item__month {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Notes Widget */
.notes-widget__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notes-widget__item {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.notes-widget__item:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary-light);
}

.notes-widget__item--important {
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-bg, rgba(255, 193, 7, 0.05));
}

.notes-widget__icon {
    flex-shrink: 0;
}

.notes-widget__content {
    flex: 1;
    min-width: 0;
}

.notes-widget__text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}

.notes-widget__text a.mention {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.notes-widget__text a.mention:hover {
    text-decoration: underline;
}

.notes-widget__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.notes-widget__mentions-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.notes-widget__open-btn {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.notes-widget__item:hover .notes-widget__open-btn {
    opacity: 1;
}

.notes-widget__footer {
    margin-top: var(--spacing-3);
    text-align: center;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

.notes-widget__empty {
    text-align: center;
    padding: var(--spacing-6) var(--spacing-4);
}

.dashboard-list-item__info {
    flex: 1;
    min-width: 0;
}

.dashboard-list-item__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-list-item__title:hover {
    color: var(--color-primary);
}

.dashboard-list-item__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Dashboard Chart Placeholder */
.dashboard-chart-placeholder {
    height: 200px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-chart-placeholder__content {
    text-align: center;
    color: var(--color-text-muted);
}

.dashboard-chart-placeholder__icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--spacing-2);
}

/* Dashboard Sidebar Toggle Button - добавляется через JavaScript */
.dashboard-sidebar-toggle {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    min-height: 48px;
}

@media (max-width: 1024px) {
    .dashboard-sidebar-toggle {
        display: inline-flex;
        position: sticky;
        top: calc(var(--header-height) + 1px);
        z-index: calc(var(--z-sticky) - 1);
        margin-bottom: var(--spacing-4);
        margin-left: calc(-1 * var(--spacing-4));
        margin-right: calc(-1 * var(--spacing-4));
        width: calc(100% + var(--spacing-8));
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: var(--color-primary);
        color: white;
        transition: all var(--transition-fast);
    }
    
    .dashboard-sidebar-toggle:hover {
        background-color: var(--color-primary-hover);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .dashboard-sidebar-toggle:active {
        transform: translateY(1px);
    }
}

@media (max-width: 768px) {
    .dashboard-sidebar-toggle {
        margin-left: calc(-1 * var(--spacing-3));
        margin-right: calc(-1 * var(--spacing-3));
        width: calc(100% + var(--spacing-6));
    }
}

/* Dashboard Sidebar Overlay */
.dashboard-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

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

@media (max-width: 1024px) {
    .dashboard-sidebar-overlay {
        display: block;
    }
}

/* Responsive Dashboard */
@media (max-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Sidebar скрыт по умолчанию на мобильных */
    .dashboard__sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        z-index: var(--z-modal);
        width: 280px;
        max-width: 85vw;
        height: calc(100vh - var(--header-height));
        transition: left var(--transition-normal);
        box-shadow: var(--shadow-lg);
    }
    
    .dashboard__sidebar.is-open {
        left: 0;
    }
}

@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================
   Dashboard CRUD Pages
   ========================================== */

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.dashboard-header__info h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-1);
}

.dashboard-header__actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Dashboard Filters */
/* Dashboard Filters */
.dashboard-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* View Switcher - Legacy support (use view-switcher.css for new implementation) */
.view-switcher {
    display: flex;
    gap: var(--spacing-1);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-1);
    flex-shrink: 0;
}

/* Support both old and new class names */
.view-switcher__btn,
.view-switcher__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-switcher__btn svg,
.view-switcher__button svg {
    width: 20px;
    height: 20px;
}

.view-switcher__btn:hover,
.view-switcher__button:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Support both old and new active class names */
.view-switcher__btn.is-active,
.view-switcher__button--active {
    background: var(--color-primary);
    color: white;
}

.view-switcher__btn.is-active:hover,
.view-switcher__button--active:hover {
    background: var(--color-primary-hover);
}

.dashboard-filter-select {
    flex-shrink: 0;
}

.dashboard-filter-select__input {
    height: 44px;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-2) center;
    background-size: 20px;
    padding-right: var(--spacing-8);
}

.dashboard-filter-select__input:hover {
    border-color: var(--color-primary);
}

.dashboard-filter-select__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dashboard-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
    transition: border-color var(--transition-fast);
    flex: 1;
    min-width: 0;
}

.dashboard-search:focus-within {
    border-color: var(--color-primary);
}

.dashboard-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.dashboard-search__input:focus {
    outline: none;
}

.dashboard-search__input::placeholder {
    color: var(--color-text-muted);
}

.dashboard-search__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.dashboard-search__button:hover {
    color: var(--color-primary);
}

.dashboard-search__button svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .dashboard-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dashboard-search {
        order: -1;
    }
}

/* Dashboard Table */
.dashboard-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

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

.dashboard-table th,
.dashboard-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-table th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-secondary);
}

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

.dashboard-table tr:hover td {
    background: var(--color-bg-secondary);
}

.dashboard-table__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.dashboard-table__cover {
    width: 48px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-tertiary);
}

.dashboard-table__cover--wide {
    width: 80px;
    height: 48px;
}

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

.dashboard-table__info {
    min-width: 0;
}

.dashboard-table__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    display: block;
    margin-bottom: var(--spacing-1);
}

.dashboard-table__title:hover {
    color: var(--color-primary);
}

.dashboard-table__actions {
    display: flex;
    gap: var(--spacing-1);
}

.dashboard-table__date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.cover-placeholder svg {
    width: 24px;
    height: 24px;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-6);
}

.form-main {
    display: flex;
    flex-direction: column;
    /*gap: var(--spacing-4);*/
}

.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.form-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.form-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

/* Cover Upload */
.cover-upload {
    position: relative;
    aspect-ratio: 2/3;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cover-upload:hover {
    border-color: var(--color-primary);
}

.cover-upload--wide {
    aspect-ratio: 16/9;
}

.cover-upload__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.cover-upload__placeholder span:first-child {
    font-size: 32px;
}

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

.cover-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Map Upload */
.map-upload {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-upload:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.map-upload__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
}

.map-upload__icon {
    font-size: 48px;
}

.map-upload__input {
    display: none;
}

/* Settings Form */
.settings-form {
    max-width: 600px;
}

.settings-section {
    margin-bottom: var(--spacing-8);
}

.settings-section__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
}

.settings-row {
    margin-bottom: var(--spacing-4);
}

.settings-avatar {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* Checkbox Item */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

/* Monetization Placeholder */
.monetization-placeholder {
    text-align: center;
    padding: var(--spacing-8);
}

.monetization-placeholder__icon {
    font-size: 64px;
    margin-bottom: var(--spacing-4);
}

.monetization-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.monetization-feature {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

.monetization-feature__icon {
    font-size: 32px;
    display: block;
    margin-bottom: var(--spacing-2);
}

.monetization-feature h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2);
}

.monetization-feature p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ==========================================
   Analytics Page
   ========================================== */

.analytics-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.analytics-stat-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.analytics-stat-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.analytics-stat-card__icon {
    font-size: var(--font-size-lg);
}

.analytics-stat-card__trend {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
}

.analytics-stat-card__trend--up {
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
}

.analytics-stat-card__trend--down {
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.1);
}

.analytics-stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-1);
}

.analytics-stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-4);
}

.analytics-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

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

.analytics-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.analytics-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Analytics Chart */
.analytics-chart {
    min-height: 200px;
}

.analytics-chart__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-text-muted);
}

.analytics-chart__placeholder span {
    font-size: 48px;
    margin-bottom: var(--spacing-2);
}

/* Simple Chart */
.simple-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 150px;
    padding-top: var(--spacing-4);
}

.simple-chart__bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.simple-chart__bar {
    width: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
    transition: background var(--transition-fast);
}

.simple-chart__bar:hover {
    background: var(--color-primary-dark);
}

.simple-chart__label {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: var(--spacing-1);
}

/* Analytics Sources */
.analytics-sources {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.analytics-source {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.analytics-source__name {
    width: 80px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.analytics-source__bar {
    flex: 1;
    height: 8px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.analytics-source__bar > div {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.analytics-source__value {
    width: 40px;
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Analytics List */
.analytics-list {
    display: flex;
    flex-direction: column;
}

.analytics-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.analytics-list-item__rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.analytics-list-item__title {
    flex: 1;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-list-item__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}


/* ==========================================
   Explore Page
   ========================================== */

.explore-header {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.explore-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}

.explore-filters {
    margin-bottom: var(--spacing-6);
}

.explore-filters__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.explore-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.explore-results {
    margin-bottom: var(--spacing-8);
}

.explore-section-title {
    font-size: var(--font-size-xl);
    margin: var(--spacing-8) 0 var(--spacing-4);
}

.explore-section-title:first-child {
    margin-top: 0;
}

.explore-more {
    text-align: center;
    margin-top: var(--spacing-4);
}

/* ==========================================
   Authors Page
   ========================================== */

.authors-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-6) 0;
}

.authors-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}

.authors-header__actions {
    display: flex;
    gap: var(--spacing-2);
}

.search-form {
    display: flex;
    gap: var(--spacing-2);
}

.search-form .form-input {
    width: 250px;
}

.authors-filters {
    margin-bottom: var(--spacing-6);
}

.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

/* Author Card */
.author-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: all var(--transition-fast);
}

.author-card:hover {
    box-shadow: var(--shadow-md);
}

.author-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
}

.author-card__body {
    text-align: center;
}

.author-card__name {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-1);
}

.author-card__name:hover {
    color: var(--color-primary);
}

.author-card__username {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
}

.author-card__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.author-card__follow {
    flex-shrink: 0;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) 0;
}

.pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Tabs Pills */
.tabs--pills {
    border-bottom: none;
    gap: var(--spacing-2);
    margin-bottom: 0;
}

.tabs--pills .tabs__item {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.tabs--pills .tabs__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tabs--pills .tabs__item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .analytics-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .analytics-card--wide {
        grid-column: span 1;
    }
    
    .monetization-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .analytics-stats {
        grid-template-columns: 1fr;
    }
    
    .explore-filters__row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .authors-header {
        flex-direction: column;
    }
    
    .search-form .form-input {
        width: 100%;
    }
    
    .authors-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   Notifications
   ========================================== */

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    text-align: center;
    color: white;
    background: var(--color-error);
    border-radius: var(--radius-full);
}

.dropdown__menu--notifications {
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Мобильная версия уведомлений */
@media (max-width: 600px) {
    .dropdown__menu--notifications {
        position: fixed !important;
        top: var(--header-height) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-height: calc(100vh - var(--header-height)) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--color-border) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(0) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .dropdown.is-open .dropdown__menu--notifications {
        transform: translateY(0) !important;
    }
    
    .notifications-panel {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: calc(100vh - var(--header-height)) !important;
        border-radius: 0;
        overflow-y: auto;
    }
}

.dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
}

.dropdown__footer {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.notification-item:hover {
    background: var(--color-bg-secondary);
}

.notification-item--unread {
    background: var(--color-primary-light);
}

.notification-item__icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.notification-item__content {
    flex: 1;
    min-width: 0;
}

.notification-item__content p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-1);
}

.notification-item__time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ==========================================
   Tags Page
   ========================================== */

.tag-header {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.tag-header__icon {
    font-size: 48px;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--spacing-2);
}

.tag-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}

.tags-page-header {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.tags-page-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}

.tags-cloud--large {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
}

.tag--lg {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-base);
}

/* ==========================================
   Follow Button
   ========================================== */

.follow-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.follow-btn.is-following {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
}

.follow-btn.is-following:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
}

.followers-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ==========================================
   Section
   ========================================== */

.section {
    margin-bottom: var(--spacing-8);
}

.section__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
}

.section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}


/* ==========================================
   Feed Page Styles
   ========================================== */

/* Feed Layout */
.feed-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
}

@media (max-width: 900px) {
    .feed-layout {
        grid-template-columns: 1fr;
    }
    
    .feed-sidebar {
        order: -1;
    }
}

/* Feed Sidebar */
.feed-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Feed Filters */
.feed-filters {
    padding: var(--spacing-4);
}

.feed-filters__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.feed-filters__nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.feed-filters__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.feed-filters__item:hover {
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
}

.feed-filters__item.is-active {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    font-weight: var(--font-weight-medium);
}

/* Feed Tip */
.feed-tip {
    padding: var(--spacing-4);
    background-color: var(--color-bg-secondary);
}

.feed-tip h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.feed-tip p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Feed Content */
.feed-content {
    min-width: 0;
}

/* Feed List */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Feed Item */
.feed-item {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.feed-item:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-sm);
}

/* Feed Item Cover */
.feed-item__cover {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-bg-secondary);
}

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

/* Feed Item Content */
.feed-item__content {
    flex: 1;
    min-width: 0;
}

.feed-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
}

.feed-item__type {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
}

.feed-item__icon {
    font-size: var(--font-size-sm);
}

.feed-item__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.feed-item__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
}

.feed-item__title a {
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.feed-item__title a:hover {
    color: var(--color-primary);
}

.feed-item__parent {
    display: inline-block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.feed-item__parent:hover {
    color: var(--color-primary);
}

.feed-item__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.feed-item__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.feed-item__author a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.feed-item__author span:last-child {
    color: var(--color-text-muted);
}

/* Feed Item Types */
.feed-item--book .feed-item__type {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.feed-item--chapter .feed-item__type {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feed-item--article .feed-item__type {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Responsive */
@media (max-width: 600px) {
    .feed-item {
        flex-direction: column;
    }
    
    .feed-item__cover {
        width: 100%;
        height: 160px;
    }
}


/* ==========================================
   Calendar Day Modal
   ========================================== */

.calendar-day-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}

.calendar-day-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.calendar-day-modal__content {
    position: relative;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.calendar-day-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.calendar-day-modal__header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.calendar-day-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.calendar-day-modal__close:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
}

.calendar-day-modal__events {
    padding: var(--spacing-4);
    max-height: 400px;
    overflow-y: auto;
}

/* Calendar Event Item */
.calendar-event-item {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
}

.calendar-event-item:last-child {
    margin-bottom: 0;
}

.calendar-event-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 18px;
}

.calendar-event-item__info {
    flex: 1;
    min-width: 0;
}

.calendar-event-item__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-1);
}

.calendar-event-item__time {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.calendar-event-item__location {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-1);
}

/* Calendar Cell Clickable */
.calendar-cell:not(.calendar-cell--empty) {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.calendar-cell:not(.calendar-cell--empty):hover {
    background-color: var(--color-bg-secondary);
}

.calendar-cell--has-events {
    position: relative;
}

.calendar-cell--has-events::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}


/* ==========================================
   Book Edit Page
   ========================================== */

.book-edit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-6);
}

@media (max-width: 1024px) {
    .book-edit-layout {
        grid-template-columns: 1fr;
    }
}

.book-edit-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.book-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Chapter Edit Page
   ========================================== */

.chapter-edit-layout,
.calendar-event-edit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-6);
}

.calendar-event-edit-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.calendar-event-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

@media (max-width: 1024px) {
    .chapter-edit-layout,
    .calendar-event-edit-layout {
        grid-template-columns: 1fr;
    }
}

.chapter-edit-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.chapter-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.chapter-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.chapter-info__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.chapter-info__item:last-child {
    border-bottom: none;
}

.chapter-info__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.chapter-info__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Cover Upload */
.cover-upload__preview {
    aspect-ratio: 2/3;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.cover-upload__placeholder {
    text-align: center;
    color: var(--color-text-muted);
}

.cover-upload__placeholder span {
    font-size: 18px;
    display: block;
    margin-bottom: var(--spacing-2);
}

.cover-upload__placeholder p {
    font-size: var(--font-size-sm);
}

/* Genres Select */
.genres-select {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.checkbox-tag {
    display: inline-flex;
    cursor: pointer;
}

.checkbox-tag input {
    display: none;
}

.checkbox-tag span {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.checkbox-tag input:checked + span {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.checkbox-tag:hover span {
    border-color: var(--color-primary);
}

/* Tags Input */
.tags-input__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.tag--removable {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.tag__remove {
    background: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.tag__remove:hover {
    opacity: 1;
}

/* Chapters List */
.chapters-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.chapter-item:hover {
    background-color: var(--color-bg-tertiary);
}

.chapter-item__drag {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 12px;
    letter-spacing: 2px;
}

.chapter-item__number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.chapter-item__info {
    flex: 1;
    min-width: 0;
}

.chapter-item__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.chapter-item__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
}

.chapter-item__actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
}

.badge--warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

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

/* Button Danger */
.btn--danger {
    color: #ef4444;
}

.btn--danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}


/* ==========================================
   Encyclopedia Edit Page
   ========================================== */

.encyclopedia-edit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-6);
}

@media (max-width: 1024px) {
    .encyclopedia-edit-layout {
        grid-template-columns: 1fr;
    }
}

.encyclopedia-edit-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.encyclopedia-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Wiki Editor */
.wiki-editor {
    position: relative;
}

.wiki-editor__toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.wiki-editor__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.wiki-editor__btn:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.wiki-editor__separator {
    width: 1px;
    height: 20px;
    background-color: var(--color-border);
    margin: 0 var(--spacing-2);
}

.wiki-editor__content {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    min-height: 300px;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Wiki Autocomplete */
.wiki-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.wiki-autocomplete__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wiki-autocomplete__item:hover {
    background-color: var(--color-bg-secondary);
}

.wiki-autocomplete__icon {
    font-size: 16px;
}

.wiki-autocomplete__title {
    font-size: var(--font-size-sm);
}

/* Image Upload */
.image-upload__preview {
    aspect-ratio: 1;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.image-upload__placeholder {
    text-align: center;
    color: var(--color-text-muted);
}

.image-upload__placeholder span {
    font-size: 48px;
    display: block;
    margin-bottom: var(--spacing-2);
}

.image-upload__placeholder p {
    font-size: var(--font-size-sm);
}

/* Related Articles */
.related-articles-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.related-article-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.related-article-item__icon {
    font-size: 14px;
}

.related-article-item__title {
    flex: 1;
    font-size: var(--font-size-sm);
}

.related-article-item__remove {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.related-article-item__remove:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}


/* ==========================================
   Calendar Day Modal
   ========================================== */

.calendar-day__dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.calendar-day.is-today .calendar-day__dot {
    background: white;
}

.calendar-day--empty {
    visibility: hidden;
}

.calendar-day[data-calendar-day] {
    cursor: pointer;
}

.calendar-day[data-calendar-day]:hover {
    background: var(--color-primary-light);
}

/* Calendar Modal Events */
.calendar-modal-events {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.calendar-modal-event {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.calendar-modal-event:hover {
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
}

.calendar-modal-event__time {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    min-width: 80px;
    font-size: var(--font-size-sm);
}

.calendar-modal-event__info {
    flex: 1;
}

.calendar-modal-event__title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

.calendar-modal-event__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-2);
}

.calendar-modal-event__meta {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.calendar-modal-event__type {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    color: white;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-2);
}

/* Microblog Feed */
.microblog-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}


/* ==========================================
   Dashboard Microblog Page
   ========================================== */

/* Microblog Compose Form */
.microblog-compose {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-5);
}

.microblog-compose__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.microblog-compose__header {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}

.microblog-compose__input-wrap {
    flex: 1;
    min-width: 0;
}

.microblog-compose__textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--spacing-3);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: var(--line-height-relaxed);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.microblog-compose__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.microblog-compose__textarea::placeholder {
    color: var(--color-text-muted);
}

.microblog-compose__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

.microblog-compose__tools {
    display: flex;
    gap: var(--spacing-2);
}

.microblog-compose__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.microblog-compose__counter {
    font-size: var(--font-size-sm);
    min-width: 60px;
    text-align: right;
}

.microblog-compose__counter.text-error {
    color: var(--color-error);
}

/* Microblog Stats */
.microblog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.microblog-stats .stat-card {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.microblog-stats .stat-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.microblog-stats .stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: block;
    margin-bottom: var(--spacing-1);
}

.microblog-stats .stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Microblog Posts Header */
.microblog-posts-header {
    margin-bottom: var(--spacing-4);
}

.microblog-posts-header h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Microblog Posts List */
.microblog-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Microblog Post Item */
.microblog-post-item {
    padding: var(--spacing-5);
    transition: all var(--transition-fast);
}

.microblog-post-item:hover {
    box-shadow: var(--shadow-md);
}

.microblog-post-item__content {
    margin-bottom: var(--spacing-4);
}

.microblog-post-item__content p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.microblog-post-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.microblog-post-item__date {
    color: var(--color-text-muted);
}

.microblog-post-item__stats {
    display: flex;
    gap: var(--spacing-4);
    color: var(--color-text-secondary);
}

.microblog-post-item__actions {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
}

.microblog-post-item__actions .text-error {
    color: var(--color-error);
}

.microblog-post-item__actions .text-error:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}

/* Responsive Microblog */
@media (max-width: 768px) {
    .microblog-compose {
        padding: var(--spacing-4);
    }
    
    .microblog-compose__header {
        flex-direction: column;
    }
    
    .microblog-compose__footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .microblog-compose__actions {
        justify-content: space-between;
        width: 100%;
    }
    
    .microblog-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .microblog-post-item {
        padding: var(--spacing-4);
    }
    
    .microblog-post-item__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .microblog-post-item__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .microblog-post-item__actions .btn {
        width: 100%;
    }
}

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

/* ==========================================
   Social Actions
   ========================================== */

.book-header__social-actions,
.article-page__actions,
.reader__chapter-actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.btn--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
}

.btn__icon {
    font-size: 18px;
    line-height: 1;
}

.btn__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Book Rating */
.book-rating {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.book-rating__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.book-rating__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.book-rating__value {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.book-rating__stars {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.book-rating__number {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.book-rating__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.book-rating__actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Article Rating */
.article-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.article-rating__stars {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 18px;
    line-height: 1;
    opacity: 0.3;
    transition: opacity var(--transition-fast);
}

.star--filled {
    opacity: 1;
}

.article-rating__value {
    font-weight: var(--font-weight-semibold);
}

.article-rating__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Premium Badges */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.premium-badge--sm {
    padding: 2px 6px;
    font-size: var(--font-size-xs);
}

.premium-badge__icon {
    font-size: 14px;
    line-height: 1;
}

.premium-badge__text {
    font-size: inherit;
}

.book-premium-badge,
.article-premium-badge {
    margin-top: var(--spacing-4);
}

.book-premium-badge__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
}

/* Book Card Quick Actions */
.book-card-wrapper,
.article-card-wrapper {
    position: relative;
}

.book-card__cover,
.article-card__image {
    position: relative;
}

.book-card__premium-badge,
.article-card__premium-badge {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    z-index: 2;
}

/* Edit link for content owners and moderators */
.edit-link {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    text-decoration: none;
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: 3;
}

.book-card:hover .edit-link,
.article-card:hover .edit-link {
    opacity: 1;
}

.edit-link:hover {
    background: var(--color-primary);
    transform: scale(1.1);
}

.edit-link--lg {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

/* Inline edit link (for titles) */
.edit-link--inline {
    position: relative;
    display: inline-flex;
    width: auto;
    height: auto;
    padding: var(--spacing-1) var(--spacing-2);
    margin-left: var(--spacing-2);
    background: var(--color-bg-tertiary);
    opacity: 0.6;
    vertical-align: middle;
}

.edit-link--inline:hover {
    opacity: 1;
    background: var(--color-primary);
}

/* Comment edit indicator */
.comment__edited {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

.book-card__quick-actions,
.article-card__quick-actions {
    position: absolute;
    bottom: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    gap: var(--spacing-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2;
}

.book-card:hover .book-card__quick-actions,
.article-card:hover .article-card__quick-actions {
    opacity: 1;
}

.book-card__quick-action,
.article-card__quick-action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.book-card__quick-action:hover,
.article-card__quick-action:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.book-card__quick-action.is-active,
.article-card__quick-action.is-active {
    background: var(--color-primary);
}

.book-card__quick-action-icon,
.article-card__quick-action-icon {
    font-size: 14px;
    line-height: 1;
}

.book-card__quick-action-count,
.article-card__quick-action-count {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
}

.book-card__stat-stars {
    font-size: 12px;
    line-height: 1;
}

.article-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-sm);
}

/* Author Actions */
.book-header__author-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.book-header__author-actions {
    display: flex;
    gap: var(--spacing-2);
}

.author-box__actions {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-top: var(--spacing-3);
}

.author-subscription-info {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.author-subscription-info__badge {
    margin-bottom: var(--spacing-2);
}

.author-subscription-info__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Comment Actions */
.comment__actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.comment__action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.comment__action:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

.comment__action-icon {
    font-size: 14px;
    line-height: 1;
}

.comment__action-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Responsive */
@media (max-width: 768px) {
    .book-header__social-actions {
        flex-wrap: wrap;
    }
    
    .book-header__author-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .book-header__author-actions .btn {
        width: 100%;
    }
    
    .author-box__actions {
        flex-direction: column;
    }
    
    .author-box__actions .btn {
        width: 100%;
    }
    
    .book-card__quick-actions,
    .article-card__quick-actions {
        opacity: 1;
    }
}


/* ==========================================
   Contest Pages
   ========================================== */

/* Contest Create Page */
.contest-create-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-6);
}

@media (max-width: 1024px) {
    .contest-create-layout {
        grid-template-columns: 1fr;
    }
}

.contest-create-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.contest-create-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.help-text p {
    margin-bottom: var(--spacing-3);
}

.help-text p:last-child {
    margin-bottom: 0;
}

.help-text strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Contest Page */
.contest-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-6) 0;
}

.contest-header {
    margin-bottom: var(--spacing-8);
}

.contest-header__content {
    text-align: center;
}

.contest-header__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.contest-header__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    color: var(--color-text);
}

.contest-header__description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
    margin: 0 auto;
}

/* Contest Info */
.contest-info {
    margin-bottom: var(--spacing-6);
}

.contest-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.contest-info__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contest-info__icon {
    font-size: 32px;
    flex-shrink: 0;
}

.contest-info__content {
    flex: 1;
    min-width: 0;
}

.contest-info__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-1);
}

.contest-info__value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Contest Timer */
.contest-timer {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-5);
    background: linear-gradient(135deg, var(--color-primary-light), rgba(37, 99, 235, 0.1));
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xl);
    text-align: center;
}

.contest-timer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.contest-timer__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.contest-timer__countdown {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.contest-timer__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
}

.contest-timer__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    min-width: 48px;
    text-align: center;
}

.contest-timer__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contest-timer__expired {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
}

/* Contest Content */
.contest-content {
    margin-top: var(--spacing-8);
}

.contest-content__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Contest Stage */
.contest-stage {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.contest-stage__header {
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.contest-stage__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
}

.contest-stage__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.contest-stage__actions {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.contest-stage__hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2);
}

/* Contest Rules */
.contest-rules {
    padding: var(--spacing-5);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contest-rules__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

.contest-rules__content {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    white-space: pre-line;
}

/* Contest Prizes */
.contest-prizes {
    padding: var(--spacing-5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-lg);
}

.contest-prizes__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.contest-prizes__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Contest Voting Filters */
.contest-voting-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.contest-voting-sort {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .contest-voting-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contest-voting-sort {
        width: 100%;
    }
}

/* Contest Entries */
.contest-entries {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.contest-entry {
    padding: var(--spacing-5);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.contest-entry:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.contest-entry--voted {
    border-color: var(--color-success);
    background-color: rgba(16, 185, 129, 0.05);
}

.contest-entry__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.contest-entry__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.contest-entry__author-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.contest-entry__author-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.contest-entry__author-username {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.contest-entry__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contest-entry__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.contest-entry__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
    color: var(--color-text);
}

.contest-entry__text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin-bottom: var(--spacing-4);
    white-space: pre-line;
}

.contest-entry__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.contest-entry__stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.contest-entry__stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contest-entry__stat-icon {
    font-size: 18px;
}

.contest-entry__stat-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.contest-entry__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

@media (max-width: 768px) {
    .contest-entry__footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contest-entry__actions {
        flex-direction: column;
    }
    
    .contest-entry__actions .btn {
        width: 100%;
    }
}

/* Form Char Counter */
.form-char-counter {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.form-char-counter__current {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.form-char-counter__separator {
    color: var(--color-text-muted);
}

.form-char-counter__max {
    color: var(--color-text-muted);
}

.form-char-counter__hint {
    margin-left: var(--spacing-2);
    color: var(--color-text-muted);
}

/* Contest Winners */
.contest-winners {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Contest Work Card */
.contest-work-card {
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-4);
    transition: all var(--transition-fast);
}

.contest-work-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.contest-work-card--finalist {
    border: 2px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
}

.contest-work-card__badge {
    margin-bottom: var(--spacing-3);
}

.contest-work-card__content {
    margin-bottom: var(--spacing-4);
}

.contest-work-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

.contest-work-card__author {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.contest-work-card__votes {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.contest-work-card__votes-icon {
    font-size: 18px;
}

.contest-work-card__votes-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.contest-work-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.contest-works-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Contest Winner Card */
.contest-winner-card {
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-5);
    text-align: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.3);
}

.contest-winner-card__medal {
    margin-bottom: var(--spacing-4);
}

.contest-winner-card__content {
    margin-bottom: var(--spacing-5);
}

.contest-winner-card__place {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contest-winner-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

.contest-winner-card__author {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.contest-winner-card__votes {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.contest-winner-card__actions {
    margin-top: var(--spacing-4);
}

.contest-winners-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Responsive */
@media (max-width: 768px) {
    .contest-header__title {
        font-size: var(--font-size-2xl);
    }
    
    .contest-header__description {
        font-size: var(--font-size-base);
    }
    
    .contest-info__grid {
        grid-template-columns: 1fr;
    }
    
    .contest-timer__countdown {
        gap: var(--spacing-2);
    }
    
    .contest-timer__value {
        font-size: var(--font-size-xl);
        min-width: 40px;
    }
    
    .contest-work-card__actions {
        flex-direction: column;
    }
    
    .contest-work-card__actions .btn {
        width: 100%;
    }
}


/* ==========================================
   Notifications Page
   ========================================== */

.notifications-filters {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.notifications-group__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.notification-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    text-decoration: none;
    color: var(--color-text);
}

.notification-list-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.notification-list-item--unread {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
}

.notification-list-item--unread:hover {
    background: rgba(59, 130, 246, 0.08);
}

.notification-list-item__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 20px;
    background: var(--color-bg-secondary);
}

.notification-list-item__icon--comment {
    background: rgba(59, 130, 246, 0.1);
}

.notification-list-item__icon--follower {
    background: rgba(139, 92, 246, 0.1);
}

.notification-list-item__icon--achievement {
    background: rgba(245, 158, 11, 0.1);
}

.notification-list-item__icon--like {
    background: rgba(239, 68, 68, 0.1);
}

.notification-list-item__icon--system {
    background: rgba(16, 185, 129, 0.1);
}

.notification-list-item__content {
    flex: 1;
    min-width: 0;
}

.notification-list-item__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
}

.notification-list-item__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
    line-height: 1.5;
}

.notification-list-item__time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.notification-list-item__action {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.notification-list-item:hover .notification-list-item__action {
    opacity: 1;
}


/* ==========================================
   Map Card Component
   ========================================== */

.map-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--color-bg-tertiary);
}

.map-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2);
}

.map-card__type {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.map-card__views {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}


/* ==========================================
   Encyclopedia Card Component
   ========================================== */

.encyclopedia-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: var(--color-bg-tertiary);
}

.encyclopedia-card--compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.encyclopedia-card--compact:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.encyclopedia-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.encyclopedia-card__info {
    flex: 1;
    min-width: 0;
}

.encyclopedia-card--compact .encyclopedia-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
    color: var(--color-text);
}

.encyclopedia-card--compact .encyclopedia-card__category {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}


/* ==========================================
   Input Error State
   ========================================== */

.input--error,
.form-input--error {
    border-color: var(--color-error);
}

.input--error:focus,
.form-input--error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}


/* ==========================================
   Button Loading State
   ========================================== */

.btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: btn-spinner 0.6s linear infinite;
}

.btn--primary.is-loading::after {
    border-color: white;
    border-right-color: transparent;
}

@keyframes btn-spinner {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================
   Responsive Notifications
   ========================================== */

@media (max-width: 768px) {
    .notifications-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-2);
        margin-bottom: var(--spacing-4);
    }
    
    .notifications-filters .filter-btn {
        flex-shrink: 0;
    }
    
    .notification-list-item {
        padding: var(--spacing-3);
    }
    
    .notification-list-item__icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .notification-list-item__action {
        opacity: 1;
    }
}


/* ==========================================
   Event Card Component
   ========================================== */

.event-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.event-card__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.event-card__footer {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.event-card--compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg);
    border-left: 3px solid;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.event-card--compact .event-card__time {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    min-width: 45px;
}

.event-card--compact .event-card__info {
    flex: 1;
    min-width: 0;
}

.event-card--compact .event-card__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card--compact .event-card__type {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.event-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
    color: var(--color-text);
}

.event-list-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.event-list-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

.event-list-item__day {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.event-list-item__month {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.event-list-item__content {
    flex: 1;
    min-width: 0;
}

.event-list-item__title {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.event-list-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* ==========================================
   Contest Card Component
   ========================================== */

.contest-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
}

.contest-card__image {
    position: relative;
}

.contest-card__status {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
}

.contest-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-3);
}

.contest-card__prize {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}


/* ==========================================
   Error Pages (404, 500, etc.)
   ========================================== */

.error-page {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
    max-width: 600px;
    margin: 0 auto;
}

.error-page__icon {
    font-size: 80px;
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

.error-page__code {
    font-size: 120px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.error-page__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
}

.error-page__text {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-8);
    line-height: var(--line-height-relaxed);
}

.error-page__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-12);
}

.error-page__suggestions {
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-border);
}

.error-page__suggestions h3 {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
}

.error-page__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
}

.error-page__links li {
    list-style: none;
}

.error-page__links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.error-page__links a:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .error-page__code {
        font-size: 80px;
    }
    
    .error-page__actions {
        flex-direction: column;
    }
    
    .error-page__links {
        flex-direction: column;
        align-items: center;
    }
}


/* ==========================================
   Auth Modal Styles
   ========================================== */

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    /*gap: var(--spacing-5);*/
}

.auth-form .form-group {
    margin-bottom: 0;
    padding-bottom: var(--spacing-4);
    position: relative;
}

.auth-form .form-error, .floating-field__error {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 9px;
}

.form-error.alert {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.auth-form__description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--spacing-2);
}

.auth-form__submit {
    width: 100%;
    margin-top: var(--spacing-2);
}

.auth-form__footer {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
}

.auth-form__footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.auth-form__forgot {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    float: right;
}

/* Auth Social Buttons */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.auth-social--row {
    flex-direction: row;
}

.auth-social--row .auth-social__btn {
    flex: 1;
}

.auth-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-social__btn:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-text-muted);
}

.auth-social__btn--google:hover {
    border-color: #4285F4;
}

.auth-social__btn--vk {
    background: #0077FF;
    border-color: #0077FF;
    color: white;
}

.auth-social__btn--vk:hover {
    background: #0066DD;
    border-color: #0066DD;
}

.auth-social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin: var(--spacing-2) 0;
}

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

.auth-divider span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Password Input */
.password-input {
    position: relative;
}

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

.password-input__toggle {
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.password-input__toggle:hover {
    background: var(--color-bg-secondary);
}

.password-input__icon {
    font-size: 16px;
}

/* Password Strength */
.password-strength {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.password-strength__bar {
    flex: 1;
    height: 4px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.password-strength__fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.password-strength__fill--weak {
    background: #ef4444;
}

.password-strength__fill--fair {
    background: #f59e0b;
}

.password-strength__fill--good {
    background: #10b981;
}

.password-strength__fill--strong {
    background: #059669;
}

.password-strength__text {
    font-size: var(--font-size-xs);
    min-width: 60px;
}

.password-strength__text--weak {
    color: #ef4444;
}

.password-strength__text--fair {
    color: #f59e0b;
}

.password-strength__text--good {
    color: #10b981;
}

.password-strength__text--strong {
    color: #059669;
}

/* Input with Prefix */
.input-with-prefix {
    position: relative;
}

.input-with-prefix .form-input {
    padding-left: 32px;
}

.input-prefix {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

/* Code Input */
.code-input {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
}

.code-input input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: all var(--transition-fast);
}

.code-input input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}

.code-input input:not(:placeholder-shown) {
    border-color: var(--color-primary);
}

/* Auth Error */
.auth-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color: #dc2626;
    font-size: var(--font-size-sm);
    animation: shake 0.5s ease-in-out;
}

/* Auth Form Grid (two columns) */
.auth-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media (max-width: 500px) {
    .auth-form__grid {
        grid-template-columns: 1fr;
    }
    
    .auth-social--row {
        flex-direction: column;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Auth Success */
.auth-success {
    text-align: center;
    padding: var(--spacing-6) 0;
}

.auth-success__icon {
    font-size: 64px;
    margin-bottom: var(--spacing-4);
}

.auth-success__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2);
}

.auth-success__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-6);
}

/* Resend Timer */
.resend-timer {
    color: var(--color-text-muted);
}

/* Auth Steps */
.auth-step {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Auth */
@media (max-width: 480px) {
    .code-input input {
        width: 40px;
        height: 48px;
        font-size: var(--font-size-lg);
    }
    
    .auth-social__btn {
        font-size: var(--font-size-xs);
    }
}


/* ==========================================
   Form Actions
   ========================================== */

.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.form-actions--right {
    justify-content: flex-end;
}

.form-actions--center {
    justify-content: center;
}

@media (max-width: 600px) {
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
}


/* ==========================================
   Author Page Layout with Sidebar
   ========================================== */

.author-page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

.author-page-content {
    min-width: 0;
}

.social-sidebar {
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--spacing-4));
}

.social-sidebar .sidebar-nav {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
}

.social-sidebar .sidebar-nav__section {
    padding: var(--spacing-2) 0;
}

.social-sidebar .sidebar-nav__section:first-child {
    padding-top: 0;
}

.social-sidebar .sidebar-nav__section:last-child {
    padding-bottom: 0;
}

.social-sidebar .sidebar-nav__section + .sidebar-nav__section {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-2);
}

.social-sidebar .sidebar-nav__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-2) var(--spacing-3);
}

.social-sidebar .sidebar-nav__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.social-sidebar .sidebar-nav__item:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

.social-sidebar .sidebar-nav__item.is-active {
    background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
    color: var(--color-primary);
}

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

/* Promo block for guests */
.sidebar-nav__promo {
    text-align: center;
    padding: var(--spacing-4) var(--spacing-2);
}

.sidebar-nav__promo-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.sidebar-nav__promo-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.sidebar-nav__promo-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-4);
}

.sidebar-nav__promo-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.sidebar-nav__promo-actions .btn {
    width: 100%;
}

@media (max-width: 900px) {
    .author-page-layout {
        grid-template-columns: 1fr;
    }
    
    .author-page-layout .social-sidebar {
        display: none;
    }
}


/* ==========================================
   Feed Page Layout
   ========================================== */

.feed-page-layout {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: var(--spacing-6);
    align-items: start;
}

.feed-main {
    min-width: 0;
}

.feed-aside {
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--spacing-4));
}

@media (max-width: 1100px) {
    .feed-page-layout {
        grid-template-columns: 200px 1fr;
    }
    
    .feed-aside {
        display: none;
    }
}

@media (max-width: 768px) {
    .feed-page-layout {
        grid-template-columns: 1fr;
    }
    
    .feed-page-layout .social-sidebar {
        display: none;
    }
}

/* ==========================================
   Mobile Bottom Navigation
   ========================================== */

.social-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky, 100);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-2) var(--spacing-4);
    padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom, 0));
}

.social-mobile-nav {
    justify-content: space-around;
    align-items: center;
}

.social-mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.social-mobile-nav__item:hover,
.social-mobile-nav__item:active {
    background: var(--color-bg-secondary);
}

.social-mobile-nav__item.is-active {
    color: var(--color-primary);
}

.social-mobile-nav__item.is-active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
}

.social-mobile-nav__icon {
    font-size: 1.5rem;
}

.social-mobile-nav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: white;
    background: var(--color-danger, #ef4444);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .social-mobile-nav {
        display: flex;
    }
    
    /* Add padding to body to prevent content from being hidden behind nav */
    body:has(.social-mobile-nav) {
        padding-bottom: 72px;
    }
}

/* Dark mode */
[data-theme="dark"] .social-mobile-nav {
    background: rgba(30, 41, 59, 0.95);
    border-color: var(--color-border);
}


/* ==========================================
   Dashboard Top Navigation
   ========================================== */

.dashboard-topnav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    margin: 0 calc(-1.3 * var(--spacing-6)) var(--spacing-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--header-height, 64px);
    z-index: 50;
    /*justify-content: space-between;*/
}

.dashboard-topnav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dashboard-topnav__item:hover {
    color: var(--color-text);
    background: var(--color-bg-tertiary);
}

.dashboard-topnav__item.is-active {
    color: var(--color-primary);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
}

.dashboard-topnav__arrow {
    font-size: 0.7em;
    opacity: 0.6;
}

.dashboard-topnav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}

.dashboard-topnav__item.is-active .dashboard-topnav__count {
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.15);
}

.dashboard-topnav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: white;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.dashboard-topnav__dropdown {
    position: relative;
}

.dashboard-topnav__dropdown .dropdown__menu {
    min-width: 220px;
    left: 0;
    right: auto;
    margin-top: var(--spacing-2);
}

/* Mobile: hide top nav */
@media (max-width: 900px) {
    .dashboard-topnav {
        display: none;
    }
}


/* ==========================================
   Mobile-only dropdown items
   ========================================== */

.dropdown__item--mobile-only,
.dropdown__divider--mobile-only {
    display: none !important;
}

@media (max-width: 900px) {
    .dropdown__item--mobile-only {
        display: flex !important;
    }
    
    .dropdown__divider--mobile-only {
        display: block !important;
    }
}


/* ==========================================
   Dropdown count badge
   ========================================== */

.dropdown__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}


/* ==========================================
   Image Upload Component
   ========================================== */

.image-upload {
    position: relative;
}

.image-upload__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.image-upload__dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: hidden;
}

.image-upload__dropzone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
}

.image-upload__dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
    transform: scale(1.01);
}

.image-upload__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-text-muted);
}

.image-upload__icon {
    font-size: 1.5rem;
    opacity: 0.6;
}

.image-upload__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.image-upload__text-main {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.image-upload__text-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.image-upload__preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

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

.image-upload__remove {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.image-upload__dropzone:hover .image-upload__remove {
    opacity: 1;
}

.image-upload__remove:hover {
    background: var(--color-danger, #ef4444);
}

.image-upload__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
}

.image-upload__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.image-upload__hint {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.image-upload__error {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-danger, #ef4444);
}

/* Aspect Ratios */
.image-upload--square .image-upload__dropzone {
    aspect-ratio: 1;
    min-height: auto;
}

.image-upload--square .image-upload__preview {
    min-height: auto;
}

.image-upload--wide .image-upload__dropzone {
    aspect-ratio: 16/9;
    min-height: auto;
}

.image-upload--wide .image-upload__preview {
    min-height: auto;
}

.image-upload--portrait .image-upload__dropzone {
    aspect-ratio: 2/3;
    min-height: auto;
    max-width: 200px;
}

.image-upload--portrait .image-upload__preview {
    min-height: auto;
}

.image-upload--banner .image-upload__dropzone {
    aspect-ratio: 3/1;
    min-height: auto;
}

.image-upload--banner .image-upload__preview {
    min-height: auto;
}