.course-container {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .course-header {
        display: flex;
        margin-bottom: 20px;
        padding: 25px 15px;  /* 增加padding来弥补图片去除后的空间 */
        background-color: #f9f9f9;
        border-radius: 5px;
    }
    
    .course-info {
        flex: 1;
    }
    
    .course-title {
        font-size: 28px;  /* 增大标题字体 */
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .course-description {
        color: #666;
        margin-bottom: 20px;
        font-size: 16px;  /* 增大描述字体 */
    }
    
    .btn-purchase {
        background-color: #4a90e2;
        color: white;
        padding: 8px 15px;
        border-radius: 4px;
        margin-right: 10px;
        display: inline-block;
        text-decoration: none;
    }
    
    .btn-purchase:hover {
        background-color: #3a80d2;
        color: white;
        text-decoration: none;
    }
    
    .btn-group-purchase {
        background-color: #5cb85c;
        color: white;
    }
    
    .btn-group-purchase:hover {
        background-color: #4cA84c;
        color: white;
    }
    
    .nav-tabs {
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }
    
    .nav-tabs > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
        color: #555;
    }
    
    .nav-tabs > li > a:hover {
        border-color: #eee #eee #ddd;
        background-color: #f9f9f9;
    }
    
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }
    
    .qr-code {
        text-align: center;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 20px;
        border: 1px solid #eee;
    }
    
    .qr-code img {
        max-width: 200px;
        height: auto;
        margin: 10px 0;
    }
    
    .qr-code h4 {
        color: #333;
        margin-top: 0;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .progress-card {
        padding: 18px 16px;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 20px;
        border: 1px solid #eee;
        text-align: center;
    }

    .progress-card h4 {
        color: #333;
        margin-top: 0;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .progress-card .progress-num {
        font-size: 30px;
        font-weight: 700;
        color: #52c41a;
        margin-bottom: 12px;
    }

    .progress-card .progress-num span {
        font-size: 18px;
        font-weight: 500;
        color: #999;
    }

    .progress-card p {
        color: #888;
        font-size: 13px;
        margin: 0;
    }
    
    .problem-item {
        display: flex;
        padding: 8px 0;
        align-items: center;
        gap: 10px;
    }
    
    .problem-item:hover {
        background: #f5f5f5;
        border-radius: 4px;
    }
    
    .problem-item a {
        color: #1890ff;
        text-decoration: none;
        font-size: 14px;
    }
    
    .problem-item a:hover {
        color: #40a9ff;
    }
    
    .status.accepted {
        color: #52c41a;
        font-size: 16px;
    }
    
    .year-header {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 15px 0 10px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }
    
    .collapse-container {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        background: #fff;
        width: 100%;
        margin: 15px auto;
    }
    
    .collapse-item {
        border-bottom: 1px solid #e8e8e8;
    }
    
    .collapse-item:last-child {
        border-bottom: none;
    }
    
    .collapse-header {
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
    }
    
    .collapse-header:hover {
        background: #f5f5f5;
    }
    
    .collapse-arrow {
        width: 8px;
        height: 8px;
        border-right: 2px solid #666;
        border-bottom: 2px solid #666;
        transform: rotate(45deg);
        transition: transform 0.2s;
    }
    
    .collapse-item.active .collapse-arrow {
        transform: rotate(-135deg);
    }
    
    .collapse-content {
        display: none;
        padding: 10px 15px;
        background: #fff;
    }
    
    .collapse-item.active .collapse-content {
        display: block;
    }
    
    /* P2：搜索框 + 视图切换 + 进度 */
    .cc-toolbar {
        margin: 4px 0 14px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cc-search {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        padding: 9px 14px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
    }

    .cc-viewtabs {
        flex-shrink: 0;
        display: inline-flex;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .cc-viewbtn {
        border: none;
        background: #fff;
        color: #666;
        padding: 9px 14px;
        font-size: 13px;
        cursor: pointer;
        outline: none;
    }

    .cc-viewbtn + .cc-viewbtn {
        border-left: 1px solid #eee;
    }

    .cc-viewbtn.active {
        background: #4a90e2;
        color: #fff;
    }

    .cc-search:focus {
        border-color: #4a90e2;
    }

    .year-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .year-progress {
        font-size: 13px;
        font-weight: 500;
        color: #52c41a;
    }

    .ch-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .contest-progress {
        font-size: 12px;
        color: #999;
        background: #f0f0f0;
        border-radius: 10px;
        padding: 1px 9px;
        line-height: 1.6;
    }

    .contest-progress.done {
        color: #fff;
        background: #52c41a;
    }

    .cc-empty {
        text-align: center;
        color: #999;
        padding: 30px 0;
    }

    @media (max-width: 768px) {
        .course-header {
            padding: 15px;
        }

        .course-title {
            font-size: 22px;
        }

        .course-description {
            font-size: 14px;
        }
    }

    /* ===================== 视觉：贴合 syzoj / Semantic UI 画风（简洁 · 少圆角） ===================== */
    :root {
        --r: 4px;
        --line: rgba(34, 36, 38, .15);
        --line-soft: rgba(34, 36, 38, .1);
        --ink: rgba(0, 0, 0, .87);
        --muted: rgba(0, 0, 0, .45);
        --link: #4183c4;
        --ok: #21ba45;
        --soft: #f9fafb;
        --seg-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
    }

    /* 卡片 = Semantic segment 风：白底、细边、极小圆角、微阴影，不用渐变 */
    .course-container,
    .collapse-container,
    .progress-card,
    .qr-code {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--seg-shadow);
    }

    .course-container { padding: 20px; }

    /* 头部：朴素浅色块，去渐变去竖条 */
    .course-header {
        padding: 20px;
        background: var(--soft);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
    }

    .course-title { font-size: 24px; font-weight: 700; color: var(--ink); }
    .course-title::before { content: none; }
    .course-description { color: var(--muted); }

    /* Tab：Semantic pointing 风（底部指示条，扁平） */
    .nav-tabs { border-bottom: 1px solid var(--line); }
    .nav-tabs > li > a {
        margin: 0 20px 0 0;
        padding: 10px 2px;
        border: none !important;
        border-radius: 0;
        color: var(--muted);
        font-weight: 400;
        background: transparent !important;
    }
    .nav-tabs > li > a:hover { color: var(--ink); }
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: var(--ink);
        font-weight: 700;
        border: none;
        border-bottom: 2px solid var(--link);
        background: transparent;
        margin-bottom: -1px;
    }

    /* 搜索框 = Semantic input */
    .cc-search {
        padding: 8px 12px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: #fff;
        color: var(--ink);
    }
    .cc-search:focus { border-color: var(--link); box-shadow: none; }

    /* 视图切换 = 方正灰按钮 */
    .cc-viewtabs { border: 1px solid var(--line); border-radius: var(--r); }
    .cc-viewbtn { padding: 8px 14px; color: var(--muted); }
    .cc-viewbtn + .cc-viewbtn { border-left: 1px solid var(--line); }
    .cc-viewbtn.active { background: var(--link); color: #fff; }

    /* 分组标题：朴素，去主色竖条 */
    .year-header {
        margin: 20px 0 8px;
        padding: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        border-bottom: none;
    }
    .year-header > span:first-child { padding-left: 0; }
    .year-header > span:first-child::before { content: none; }
    .year-progress { color: var(--muted); font-weight: 400; font-size: 13px; }

    /* 折叠项 */
    .collapse-container { margin: 8px 0; overflow: hidden; }
    .collapse-item { border-bottom: 1px solid var(--line-soft); }
    .collapse-header { padding: 11px 14px; font-size: 14px; color: var(--ink); }
    .collapse-header:hover,
    .collapse-item.active > .collapse-header { background: var(--soft); }
    .collapse-arrow { border-color: var(--muted); }
    .collapse-content { padding: 4px 14px 10px; }

    /* 题目行：简洁 */
    .problem-item { padding: 7px 8px; border-radius: var(--r); }
    .problem-item:hover { background: var(--soft); }
    .problem-item a { color: var(--link); }
    .problem-item a:hover { color: var(--link); text-decoration: underline; }
    .status.accepted { color: var(--ok); }

    /* 进度徽章：小方标签，不用大胶囊 */
    .contest-progress {
        padding: 1px 7px;
        border-radius: 3px;
        background: #f3f4f5;
        color: var(--muted);
        font-weight: 400;
        font-size: 12px;
    }
    .contest-progress.done { background: #e5f9e7; color: var(--ok); }

    /* 进度卡：朴素 */
    .progress-card { padding: 18px 16px; text-align: center; }
    .progress-card h4 { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
    .progress-card .progress-num { margin: 4px 0 12px; font-size: 32px; font-weight: 700; color: var(--ok); }
    .progress-card .progress-num span { color: var(--muted); font-weight: 400; }
    .progress-card .progress { height: 8px; border-radius: var(--r); background: #ecedee; box-shadow: none; }
    .progress-card .progress-bar { border-radius: var(--r); background: var(--ok); }
    .progress-card p { color: var(--muted); }