:root {
           --primary-color: rgba(52, 152, 219, 0.8);
           --glass-bg: rgba(255, 255, 255, 0.2);
           --shadow: 0 8px 32px 0 rgba(5, 7, 26, 0.2);
       }

       body {
           min-height: 100vh;
           padding: 2rem;
       }

       .dynamic-container {
           max-width: 800px;
           margin: 0 auto;
       }

       .dynamic-header {
           text-align: center;
           margin-bottom: 2rem;
       }

       .dynamic-card {
           background: var(--glass-bg);
           backdrop-filter: blur(12px);
           border-radius: 12px;
           padding: 1.5rem;
           margin-bottom: 1.5rem;
           box-shadow: var(--shadow);
           transition: transform 0.3s ease;
           border: 1px solid rgba(0, 0, 0, 0.1);
       }

       .dynamic-card:hover {
           transform: translateY(-3px);
       }

       .dynamic-title {
           color: #2c3e50;
           font-size: 1.4rem;
           margin-bottom: 0.5rem;
       }

       .dynamic-date {
           color: #c5cdcd;
           font-size: 0.9rem;
           margin-bottom: 1rem;
       }

       .dynamic-content {
           color: #34495e;
           line-height: 1.7;
       }

       .dynamic-content img {
           max-width: 100%;
           border-radius: 8px;
           margin: 1rem 0;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       }

       .back-home {
           display: block;
           text-align: center;
           margin: 2rem 0;
           color: #3498db;
           text-decoration: none;
           font-weight: 500;
       }

       .gallery-container {
           margin: 20px 0;
       }

       .gallery-row {
           display: flex;
           gap: 10px;
           margin-bottom: 10px;
           justify-content: flex-start;
       }

       .gallery-item {
           flex: 0 0 calc(50% - 5px);
           /* 2列布局 */
           aspect-ratio: 1/1;
           overflow: hidden;
           border-radius: 8px;
           cursor: pointer;
           transition: transform 0.3s ease;
       }

       .gallery-item:hover {
           transform: scale(1.02);
       }

       .gallery-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           border-radius: 8px;
       }

       /* 当有3列时（大于4张图片） */
       .gallery-row:has(.gallery-item:nth-child(3)) .gallery-item {
           flex: 0 0 calc(33.333% - 7px);
       }

       .gallery-modal {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.9);
           z-index: 1000;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .gallery-modal-content {
           width: 90%;
           max-width: 1200px;
           height: 90vh;
           background: #fff;
           border-radius: 12px;
           overflow: hidden;
           display: flex;
           flex-direction: column;
           position: relative;
       }

       .close-btn {
           position: absolute;
           top: 15px;
           right: 20px;
           font-size: 40px;
           color: white;
           cursor: pointer;
           z-index: 1001;
           background: rgba(0, 0, 0, 0.5);
           width: 50px;
           height: 50px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: background 0.3s;
       }

       .close-btn:hover {
           background: rgba(0, 0, 0, 0.8);
       }

       .gallery-modal-main {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           padding: 20px;
           background: #000;
       }

       .current-image {
           max-width: 100%;
           max-height: 70vh;
           object-fit: contain;
       }

       .gallery-nav {
           position: absolute;
           bottom: 120px;
           left: 0;
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 20px;
       }

       .nav-btn {
           background: rgba(255, 255, 255, 0.2);
           border: none;
           color: white;
           font-size: 30px;
           padding: 10px 20px;
           cursor: pointer;
           border-radius: 5px;
           transition: background 0.3s;
       }

       .nav-btn:hover {
           background: rgba(255, 255, 255, 0.4);
       }

       .image-counter {
           color: white;
           font-size: 18px;
           background: rgba(0, 0, 0, 0.5);
           padding: 5px 15px;
           border-radius: 20px;
       }

       .gallery-thumbnails {
           height: 100px;
           background: #222;
           padding: 10px;
           display: flex;
           gap: 10px;
           overflow-x: auto;
           justify-content: center;
       }

       .thumbnail {
           height: 80px;
           width: 80px;
           object-fit: cover;
           border-radius: 5px;
           cursor: pointer;
           opacity: 0.6;
           transition: opacity 0.3s, transform 0.3s;
       }

       .thumbnail:hover {
           opacity: 0.8;
           transform: scale(1.05);
       }

       .thumbnail.active {
           opacity: 1;
           border: 3px solid #4dabf7;
           transform: scale(1.1);
       }

       .dynamic-layout {
           display: flex;
           gap: 20px;
           max-width: 1200px;
           margin: 0 auto;
       }

       /* 主内容区域 */
       .dynamic-main {
           flex: 1;
           min-width: 0;
       }

       /* 侧边栏 */
       .dynamic-sidebar {
           width: 220px;
           flex-shrink: 0;
       }

       /* 分页样式 */
       .pagination-container {
           margin-top: 30px;
           text-align: center;
       }

       .pagination {
           display: inline-flex;
           gap: 5px;
           background: var(--glass-bg);
           backdrop-filter: blur(12px);
           border-radius: 8px;
           padding: 8px;
           box-shadow: var(--shadow);
       }

       .page-btn {
           min-width: 36px;
           height: 36px;
           border: none;
           background: transparent;
           border-radius: 6px;
           color: #2c3e50;
           font-size: 14px;
           cursor: pointer;
           transition: all 0.3s ease;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .page-btn:hover {
           background: rgba(52, 152, 219, 0.1);
       }

       .page-btn.active {
           background: var(--primary-color);
           color: white;
       }

       .page-btn:disabled {
           opacity: 0.5;
           cursor: not-allowed;
       }

       .page-info {
           margin-top: 10px;
           color: #7f8c8d;
           font-size: 14px;
       }

       /* 月历样式 */
       .calendar-widget {
           background: var(--glass-bg);
           backdrop-filter: blur(12px);
           border-radius: 12px;
           padding: 1rem;
           box-shadow: var(--shadow);
           margin-bottom: 1.5rem;
           border: 1px solid rgba(0, 0, 0, 0.1);
       }

       .calendar-title {
           color: #2c3e50;
           font-size: 1.2rem;
           margin-bottom: 1rem;
           text-align: center;
           font-weight: 500;
       }

       .month-list {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       .month-item {
           padding: 12px 15px;
           background: rgba(255, 255, 255, 0.5);
           border-radius: 8px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           cursor: pointer;
           transition: all 0.3s ease;
           text-decoration: none;
           color: #34495e;
       }

       .month-item:hover {
           background: rgba(52, 152, 219, 0.1);
           transform: translateX(5px);
       }

       .month-name {
           font-size: 15px;
           font-weight: 500;
       }

       .month-count {
           background: var(--primary-color);
           color: white;
           padding: 2px 8px;
           border-radius: 10px;
           font-size: 12px;
           min-width: 20px;
           text-align: center;
       }

       .month-item.active {
           background: var(--primary-color);
           color: white;
       }

       .month-item.active .month-count {
           background: rgba(255, 255, 255, 0.3);
           color: white;
       }

       /* 响应式设计 */
       @media (max-width: 768px) {
           .dynamic-layout {
               flex-direction: column;
           }

           .dynamic-sidebar {
               width: 100%;
               order: -1;
           }

           .calendar-widget {
               margin-top: 20px;
           }

           .pagination {
               flex-wrap: wrap;
               justify-content: center;
           }
       }