* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            padding: 20px;
        }

        .calendar-container {
            max-width: 1600px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        /* 日历主体 */
        .calendar-body {
            display: flex;
        }

        /* 左侧日历网格 */
        .calendar-grid {
            flex: 3;
            padding: 20px;
        }

        .year-title {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 20px;
            text-align: center;
            color: #2d3436;
        }

        /* 年视图：一排4个月 */
        .months-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .month-card {
            border: 1px solid #e9ecef;
            border-radius: 6px;
            overflow: hidden;
        }

        .month-header {
            background: #f8f9fa;
            padding: 10px;
            text-align: center;
            font-weight: 600;
            border-bottom: 1px solid #e9ecef;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background: #f8f9fa;
        }

        .weekday {
            padding: 6px;
            text-align: center;
            font-size: 12px;
            color: #6c757d;
        }

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

        .date {
            padding: 10px 6px;
            text-align: center;
            border: 1px solid #e9ecef;
            cursor: pointer;
            font-size: 14px;
            min-height: 38px;
        }

        .date:hover {
            background: #e9ecef;
        }

        .date.active {
            background: #007bff !important;
            color: white !important;
            border: 2px solid #007bff !important;
        }

        /* 连续日期 → 统一颜色（你要的：自动一样） */
        .date.marked {
            background-color: #ffe0e0 !important;
            border: 2px solid #ff4757 !important;
            font-weight: 600;
            color: #c23616 !important;
        }

        /* 单个标注日期 → 多彩不变 */
        .date.marked1 {
            background-color: #ffe0e0 !important;
            border: 2px solid #ff4757 !important;
            font-weight: 600;
            color: #c23616 !important;
        }
        .date.marked2 {
            background-color: #e0f7ff !important;
            border: 2px solid #3742fa !important;
            font-weight: 600;
            color: #192a56 !important;
        }
        .date.marked3 {
            background-color: #e7ffed !important;
            border: 2px solid #2ed573 !important;
            font-weight: 600;
            color: #006266 !important;
        }
        .date.marked4 {
            background-color: #fff5e0 !important;
            border: 2px solid #ffa502 !important;
            font-weight: 600;
            color: #e67e22 !important;
        }
        .date.marked5 {
            background-color: #f3e5ff !important;
            border: 2px solid #a55eea !important;
            font-weight: 600;
            color: #6c5ce7 !important;
        }

        /* 右侧事件详情 */
        .event-sidebar {
            flex: 1;
            border-left: 1px solid #e9ecef;
            padding: 20px;
            min-width: 280px;
        }

        .event-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .event-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .event-item:hover {
            background: #f8f9fa;
        }

        .event-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }

        .event-info {
            flex: 1;
        }

        .event-name {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .event-tag {
            display: inline-block;
            padding: 2px 6px;
            font-size: 12px;
            border-radius: 2px;
            color: white;
            margin-right: 4px;
        }

        .tag-art {
            background: #4ecdc4;
        }

        .tag-seminar {
            background: #ff9f43;
        }

        .tag-music {
            background: #6c5ce7;
        }

        .tag-conference {
            background: #e74c3c;
        }

        .tag-social {
            background: #2ecc71;
        }

        .event-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .action-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }

        .register-btn {
            background: #007bff;
            color: white;
        }

        .calendar-btn {
            background: #6c757d;
            color: white;
        }

        /* 响应式 */
        @media (max-width: 1400px) {
            .months-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 992px) {
            .months-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 768px) {
            .calendar-body {
                flex-direction: column;
            }
            .event-sidebar {
                border-left: none;
                border-top: 1px solid #e9ecef;
            }
        }