/* ==================== 中国古风风格样式 ==================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

/* 颜色系统 - 中国古风 */
:root {
    /* 主色调 */
    --traditional-primary: #2F4F4F; /* 黛青 */
    --traditional-accent: #C3272B; /* 朱红 */
    --traditional-gold: #D4B483; /* 金黄 */
    
    /* 背景色 */
    --traditional-bg-main: #F0F0E6; /* 月白/宣纸色 */
    --traditional-bg-card: #FDFAF5; /* 浅米黄 */
    --traditional-bg-nav: #2F4F4F; /* 深木色 */
    
    /* 文字色 */
    --traditional-text-primary: #333333; /* 墨黑 */
    --traditional-text-secondary: #8B7355; /* 灰褐 */
    --traditional-text-tertiary: #E8DFCA; /* 浅灰 */
    
    /* 状态色 */
    --traditional-success: #00A971; /* 竹青 */
    --traditional-warning: #FF7E00; /* 琥珀 */
    --traditional-error: #9F1F35; /* 胭脂 */
}

/* 中国古风风格覆盖 */
.style-traditional {
    background: var(--traditional-bg-main) !important;
    font-family: 'Noto Serif SC', 'PingFang SC', serif !important;
    position: relative;
}

.style-traditional body {
    background: var(--traditional-bg-main) !important;
    font-family: 'Noto Serif SC', 'PingFang SC', serif !important;
}

.style-traditional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
    pointer-events: none;
    z-index: 0;
}

.style-traditional .app-container {
    background: var(--traditional-bg-card) !important;
    border: 8px solid var(--traditional-gold) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(212, 180, 131, 0.3) !important;
    position: relative;
    z-index: 1;
}

.style-traditional .app-header {
    background: var(--traditional-bg-card);
    border-bottom: 2px solid var(--traditional-gold);
}

.style-traditional .app-header h1 {
    color: var(--traditional-primary);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Noto Serif SC', serif;
}

.style-traditional .app-content {
    background: var(--traditional-bg-main) !important;
    position: relative;
}

/* 水墨渐变效果 */
.style-traditional .card {
    background: var(--traditional-bg-card);
    border: 1px solid var(--traditional-text-tertiary);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.style-traditional .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(44, 44, 44, 0.1), transparent);
}

/* 印章效果 */
.style-traditional .seal-badge {
    border: 2px solid var(--traditional-accent);
    color: var(--traditional-accent);
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 700;
    transform: rotate(-2deg);
    display: inline-block;
    font-size: 11px;
}

/* 古风按钮 */
.style-traditional .btn-primary {
    background: linear-gradient(135deg, var(--traditional-primary), var(--traditional-accent));
    color: white;
    border: 2px solid var(--traditional-gold);
    box-shadow: 0 4px 12px rgba(195, 39, 43, 0.3);
}

.style-traditional .btn-primary:hover {
    box-shadow: 0 6px 16px rgba(195, 39, 43, 0.4);
}

.style-traditional .progress-fill {
    background: var(--traditional-accent);
}

.style-traditional .badge-primary {
    background: var(--traditional-accent);
    color: white;
    border: 1px solid var(--traditional-gold);
}

/* 古风 - 书籍卡片 */
.style-traditional .book-card {
    background: var(--traditional-bg-card);
    border: 1px solid var(--traditional-text-tertiary);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

.style-traditional .book-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 50%, rgba(195, 39, 43, 0.1) 50%);
    border-radius: 0 12px 0 40px;
}

.style-traditional .book-cover {
    border-right: 3px solid var(--traditional-gold);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.style-traditional .book-title {
    color: var(--traditional-primary);
    font-size: 18px;
    font-weight: 700;
    font-family: 'Noto Serif SC', serif;
}

.style-traditional .book-meta {
    color: var(--traditional-text-secondary);
    font-size: 13px;
}

.style-traditional .progress-percent {
    color: var(--traditional-accent);
    font-weight: 700;
}

/* 古风 - 标签 */
.style-traditional .status-tag.active {
    background: var(--traditional-accent);
    color: white;
    border: 1px solid var(--traditional-gold);
    box-shadow: 0 2px 6px rgba(195, 39, 43, 0.3);
}

.style-traditional .status-tag:not(.active) {
    background: var(--traditional-bg-card);
    border: 1px solid var(--traditional-text-tertiary);
    color: var(--traditional-text-secondary);
}

/* 古风 - 导航 */
.style-traditional .app-bottom-nav {
    background: var(--traditional-bg-nav);
    border-top: 2px solid var(--traditional-gold);
}

.style-traditional .nav-item {
    color: var(--traditional-text-tertiary);
}

.style-traditional .nav-item.active {
    color: var(--traditional-accent);
}

.style-traditional .nav-item.active .nav-icon {
    color: var(--traditional-accent);
    filter: drop-shadow(0 0 4px rgba(195, 39, 43, 0.5));
}

/* 古风 - 输入框 */
.style-traditional .input {
    background: var(--traditional-bg-main);
    border: 1px solid var(--traditional-text-tertiary);
    border-radius: 8px;
}

.style-traditional .input:focus {
    border-color: var(--traditional-accent);
    box-shadow: 0 0 0 3px rgba(195, 39, 43, 0.1);
}

/* 古风 - 卷轴效果 */
.style-traditional .scroll-effect {
    position: relative;
}

.style-traditional .scroll-effect::before,
.style-traditional .scroll-effect::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    background: var(--traditional-gold);
    top: 0;
    border-radius: 2px;
}

.style-traditional .scroll-effect::before {
    left: -20px;
}

.style-traditional .scroll-effect::after {
    right: -20px;
}