============================================================
   YouTCM 全局样式 - 中国传统色系
   ============================================================ 

root {
    --tcm-vermilion #C41A1A;
    --tcm-vermillion-light #E84A4A;
    --tcm-vermillion-dark #8B0000;
    --tcm-ochre #C49A6C;
    --tcm-gold #B8860B;
    --tcm-ink #2C1810;
    --tcm-ink-light #5C4033;
    --tcm-ink-lighter #8B7355;
    --tcm-paper #F5F0E8;
    --tcm-paper-dark #E8E0D5;
    --tcm-jade #2E8B57;
    --tcm-jade-light #6B8E7B;
    --tcm-porcelain #F5F5F0;
    --tcm-indigo #4A6A8A;
    --tcm-border #D4C9B8;
    --tcm-shadow rgba(44, 24, 16, 0.12);
    --tcm-success #2E8B57;
    --tcm-danger #C41A1A;
    --tcm-warning #B8860B;
    --tcm-info #4A6A8A;
}

 {
    margin 0;
    padding 0;
    box-sizing border-box;
}

body {
    font-family Noto Serif SC, 华文楷体, KaiTi, SimSun, serif;
    background-color var(--tcm-paper);
    color var(--tcm-ink);
    line-height 1.7;
    font-size 16px;
}

 ===== 容器 ===== 
.tcm-container {
    max-width 1200px;
    margin 0 auto;
    padding 0 20px;
}

 ===== 导航 ===== 
#nav {
    background var(--tcm-ink);
    color var(--tcm-paper);
    padding 12px 30px;
    font-size 0.9rem;
    letter-spacing 0.05em;
}
#nav a {
    color var(--tcm-gold);
    text-decoration none;
    transition color 0.3s;
}
#nav ahover {
    color #FFD700;
}
#nav i {
    margin 0 8px;
    font-size 0.7rem;
}

 ===== 卡片 ===== 
.tcm-card {
    background var(--tcm-porcelain);
    border 1px solid var(--tcm-border);
    border-radius 8px;
    padding 40px;
    margin-bottom 30px;
    box-shadow 0 4px 20px var(--tcm-shadow);
    position relative;
}
.tcm-cardbefore {
    content '';
    position absolute;
    top 0;
    left 0;
    right 0;
    height 4px;
    background linear-gradient(90deg, var(--tcm-vermilion), var(--tcm-gold));
    border-radius 8px 8px 0 0;
}
.tcm-card-sm {
    max-width 500px;
    margin 30px auto;
}

 ===== 标题 ===== 
h1, h2, h3, h4, h5, h6 {
    font-weight 700;
    letter-spacing 0.05em;
}
h1 {
    font-size 2.2rem;
    color var(--tcm-vermilion);
    position relative;
    padding-bottom 15px;
    margin-bottom 30px;
    border-bottom 3px solid var(--tcm-vermilion);
}
h1after {
    content '';
    position absolute;
    bottom -3px;
    left 0;
    width 80px;
    height 3px;
    background var(--tcm-gold);
}
h2 {
    font-size 1.5rem;
    color var(--tcm-ink);
    margin-bottom 20px;
    padding-left 12px;
    border-left 4px solid var(--tcm-vermilion);
}
h3 {
    font-size 1.2rem;
    color var(--tcm-ink-light);
    margin-bottom 15px;
}

 ===== 表单 ===== 
.tcm-form .form-group {
    margin-bottom 20px;
}
.tcm-form label {
    display block;
    font-weight 600;
    color var(--tcm-ink);
    margin-bottom 6px;
    font-size 0.95rem;
    letter-spacing 0.03em;
}
.tcm-form label .required {
    color var(--tcm-vermilion);
    margin-left 3px;
}
.tcm-form .form-control {
    width 100%;
    padding 10px 14px;
    border 1px solid var(--tcm-border);
    border-radius 4px;
    background #FFFFFF;
    color var(--tcm-ink);
    font-size 1rem;
    font-family inherit;
    transition all 0.3s ease;
}
.tcm-form .form-controlfocus {
    outline none;
    border-color var(--tcm-vermilion);
    box-shadow 0 0 0 3px rgba(196, 26, 26, 0.12);
}
.tcm-form textarea.form-control {
    resize vertical;
    min-height 100px;
}
.tcm-form .form-row {
    display grid;
    grid-template-columns repeat(auto-fit, minmax(200px, 1fr));
    gap 20px;
}
.tcm-form .form-row .full-width {
    grid-column 1  -1;
}

 ===== 表单折叠面板 ===== 
.form-section {
    margin-bottom 25px;
    border 1px solid var(--tcm-border);
    border-radius 6px;
    overflow hidden;
}
.form-section-title {
    background linear-gradient(135deg, var(--tcm-ink), var(--tcm-ink-light));
    color var(--tcm-paper);
    padding 14px 20px;
    cursor pointer;
    font-weight 600;
    font-size 1.05rem;
    letter-spacing 0.08em;
    display flex;
    align-items center;
    justify-content space-between;
    transition background 0.3s;
    user-select none;
}
.form-section-titlehover {
    background linear-gradient(135deg, var(--tcm-ink-light), var(--tcm-ink));
}
.form-section-title .icon-chevron-down,
.form-section-title .icon-chevron-up {
    font-size 0.8rem;
    transition transform 0.3s;
}
.form-section-title .icon-chevron-up {
    display none;
}
.form-section-title.expanded .icon-chevron-down {
    display none;
}
.form-section-title.expanded .icon-chevron-up {
    display inline;
}
.collapse-content {
    padding 20px 25px;
    background var(--tcm-paper);
    transition all 0.3s ease;
}
.collapse-content.collapsed {
    display none;
}

 ===== 按钮 ===== 
.tcm-btn {
    display inline-block;
    padding 12px 30px;
    border none;
    border-radius 4px;
    font-size 1rem;
    font-weight 600;
    font-family inherit;
    cursor pointer;
    transition all 0.3s ease;
    text-decoration none;
    letter-spacing 0.05em;
}
.tcm-btn-primary {
    background var(--tcm-vermilion);
    color #FFFFFF;
}
.tcm-btn-primaryhover {
    background var(--tcm-vermillion-dark);
    transform translateY(-1px);
    box-shadow 0 4px 12px rgba(196, 26, 26, 0.3);
}
.tcm-btn-secondary {
    background var(--tcm-ink);
    color var(--tcm-paper);
}
.tcm-btn-secondaryhover {
    background var(--tcm-ink-light);
}
.tcm-btn-outline {
    background transparent;
    color var(--tcm-vermilion);
    border 2px solid var(--tcm-vermilion);
}
.tcm-btn-outlinehover {
    background var(--tcm-vermilion);
    color #FFFFFF;
}
.tcm-btn-success {
    background var(--tcm-jade);
    color #FFFFFF;
}
.tcm-btn-successhover {
    background #1E6B3E;
}
.tcm-btn-danger {
    background #A52A2A;
    color #FFFFFF;
}
.tcm-btn-dangerhover {
    background #7A1F1F;
}
.tcm-btn-sm {
    padding 8px 18px;
    font-size 0.85rem;
}
.tcm-btn-lg {
    padding 16px 40px;
    font-size 1.1rem;
}
.tcm-btn-block {
    width 100%;
    text-align center;
}
.btn-group {
    display flex;
    gap 15px;
    justify-content center;
    margin-top 30px;
    flex-wrap wrap;
}

 ===== 提示框 ===== 
.tcm-alert {
    padding 14px 20px;
    border-radius 4px;
    margin-bottom 20px;
    border-left 4px solid;
    font-size 0.95rem;
}
.tcm-alert-success {
    background #F0F7F0;
    border-color var(--tcm-jade);
    color #1E5A3A;
}
.tcm-alert-danger {
    background #FDF0EF;
    border-color var(--tcm-vermilion);
    color #7A1A1A;
}
.tcm-alert-info {
    background #F0F4F8;
    border-color var(--tcm-indigo);
    color #2A4A6A;
}
.tcm-alert-warning {
    background #FDF8F0;
    border-color var(--tcm-gold);
    color #7A6A1A;
}
.tcm-alert-success i,
.tcm-alert-danger i,
.tcm-alert-info i,
.tcm-alert-warning i {
    margin-right 8px;
}

 ===== 徽章 ===== 
.tcm-badge {
    display inline-block;
    padding 4px 16px;
    border-radius 20px;
    font-size 0.8rem;
    font-weight 600;
    letter-spacing 0.05em;
}
.tcm-badge-pending {
    background #FDF8E0;
    color #8A7A1A;
}
.tcm-badge-approved {
    background #E0F5E0;
    color #1E6A3A;
}
.tcm-badge-rejected {
    background #FDE0E0;
    color #7A1A1A;
}
.tcm-badge-completed {
    background #E0EEF5;
    color #1A4A6A;
}
.tcm-badge-cancelled {
    background #F0E0E0;
    color #6A3A3A;
}

 ===== 文件上传 ===== 
.tcm-file-upload {
    position relative;
    display flex;
    align-items center;
    gap 15px;
    flex-wrap wrap;
}
.tcm-file-upload input[type=file] {
    position absolute;
    opacity 0;
    width 0.1px;
    height 0.1px;
    z-index -1;
}
.tcm-file-upload .file-label {
    display inline-block;
    padding 10px 24px;
    background var(--tcm-vermilion);
    color #FFFFFF;
    border-radius 4px;
    cursor pointer;
    font-weight 500;
    transition background 0.3s;
    font-size 0.95rem;
}
.tcm-file-upload .file-labelhover {
    background var(--tcm-vermillion-dark);
}
.tcm-file-upload .file-name {
    color var(--tcm-ink-lighter);
    font-size 0.9rem;
}
.tcm-file-upload .file-preview {
    max-width 120px;
    max-height 120px;
    border 2px solid var(--tcm-border);
    border-radius 4px;
    object-fit cover;
    margin-top 5px;
}

 ===== 表格 ===== 
.tcm-table {
    width 100%;
    border-collapse collapse;
    font-size 0.9rem;
}
.tcm-table th {
    background var(--tcm-ink);
    color var(--tcm-paper);
    padding 12px 14px;
    text-align left;
    font-weight 600;
    letter-spacing 0.05em;
}
.tcm-table td {
    padding 10px 14px;
    border-bottom 1px solid var(--tcm-border);
    vertical-align middle;
}
.tcm-table trhover td {
    background rgba(196, 26, 26, 0.04);
}
.tcm-table .avatar-sm {
    width 40px;
    height 40px;
    border-radius 50%;
    object-fit cover;
    border 2px solid var(--tcm-border);
}
.tcm-table .text-center {
    text-align center;
}
.tcm-table .empty-row td {
    text-align center;
    padding 40px 0;
    color var(--tcm-ink-lighter);
}

 ===== 评分星星 ===== 
.stars {
    color var(--tcm-gold);
    font-size 1.1rem;
}
.stars .empty {
    color #ddd;
}

 ===== 状态徽章 ===== 
.status-badge {
    display inline-block;
    padding 3px 14px;
    border-radius 12px;
    font-size 0.75rem;
    font-weight 600;
}
.status-pending { background #FDF8E0; color #8A7A1A; }
.status-approved { background #E0F5E0; color #1E6A3A; }
.status-rejected { background #FDE0E0; color #7A1A1A; }
.status-completed { background #E0EEF5; color #1A4A6A; }
.status-cancelled { background #F0E0E0; color #6A3A3A; }
.status-hidden { background #F0F0F0; color #999; }
.status-deleted { background #FDE0E0; color #7A1A1A; }

 ===== 列表项 ===== 
.list-item {
    display flex;
    align-items center;
    gap 12px;
    padding 12px 0;
    border-bottom 1px solid #f0ebe3;
}
.list-itemlast-child {
    border-bottom none;
}
.list-item .avatar {
    width 48px;
    height 48px;
    border-radius 50%;
    object-fit cover;
    border 2px solid var(--tcm-gold);
    flex-shrink 0;
}
.list-item .info {
    flex 1;
}
.list-item .info .name {
    font-weight 600;
    color var(--tcm-ink);
}
.list-item .info .sub {
    font-size 0.85rem;
    color var(--tcm-ink-lighter);
}
.list-item .info .stars {
    font-size 0.85rem;
}
.list-item .actions {
    display flex;
    gap 6px;
    flex-wrap wrap;
}

 ===== 响应式 ===== 
@media (max-width 768px) {
    .tcm-card {
        padding 20px;
    }
    .tcm-form .form-row {
        grid-template-columns 1fr;
    }
    h1 {
        font-size 1.6rem;
    }
    #nav {
        padding 10px 16px;
        font-size 0.8rem;
    }
    .btn-group {
        flex-direction column;
    }
    .btn-group .tcm-btn {
        width 100%;
        text-align center;
    }
    .tcm-table {
        font-size 0.8rem;
    }
    .tcm-table th,
    .tcm-table td {
        padding 6px 8px;
    }
}

@media (max-width 480px) {
    .tcm-card {
        padding 15px;
    }
    .form-section-title {
        font-size 0.9rem;
        padding 12px 16px;
    }
    .collapse-content {
        padding 15px;
    }
    .list-item {
        flex-wrap wrap;
    }
    .list-item .actions {
        width 100%;
        justify-content flex-end;
    }
}