/* ========== 基础样式 ========== */
body {
    margin: 0;
    padding: 0;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF6GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0wNi0wOFQyMjo0MzoyNSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDYtMjRUMTg6MTQ6MTUrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDYtMjRUMTg6MTQ6MTUrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZDA2YjJkMTgtNzBjOS0wMzQzLWFlYzYtMTdiNGVjOGM5MGVjIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIwQTJGRDk1RDdFRjExRUNCOThDOENBRkZGREYzMEY2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6QjBBMkZEOTVEN0VGMTFFQ0I5OEM4Q0FGRkZERjMwRjYiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMEEyRkQ5MkQ3RUYxMUVDQjk4QzhDQUZGRkRGMzBGNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMEEyRkQ5M0Q3RUYxMUVDQjk4QzhDQUZGRkRGMzBGNiIvPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkMDZiMmQxOC03MGM5LTAzNDMtYWVjNi0xN2I0ZWM4YzkwZWMiIHN0RXZ0OndoZW49IjIwMjItMDYtMjRUMTg6MTQ6MTUrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4fD8ItAAAGM0lEQVRYhd2Xa2wU1xXH/3c8j33E4F1jzO56TWKv7cYJCaDUAQxViXmk5KF8IBFVq1ZpEiAiRFGI+v6AWlGkVCIqSdNGCYQ2QiJqXRQcodRQRNqkhArXLhE0Tmyy9mIbs+td7+7sY1739MPOwpZYYUyTLz3S1WhXd875zfmfOecOwASxIRRqBCADkAAIAEQADP+jEdF1l+C9yTOn656vrdu65fFtLperDgAHUGUv4YsA+TwTuWUZgWDw7q1bt20gEpv/3PvOm9Fo9D0AhFJWOADzS4XYsuV7LxMRRaOxqdf27Tve3Ny0SZbl+so9uIFMOJEAAKrXrln9k0JhzCTb/nT4cP8jjzy8G0AbY0yxAcqyOAZxCoA771z02NmBk0lDHaN8JkGcOE1PJ/n27U/tb4lE7gUwxw4s4WptfGEAUu2CwIP9//p7Uk8PU3x0gMjMEyeixFRCO3To0JnOzs6nZVleWPH0jrLhOANMdn/97d6jF4jHaez8SZqeHCZLLxARUT5fME6fPj353I5nDwSDwVW2b4aSLJ9bG04ARABytUsqpjMZlbMqSJKIzNRFKDfVwFUlwu0SxI6OjvnhcHhjMNwYeX3/6/s+HvzohKZpIyi9JQIAoxzTiTSVJgDguVw+MXV5IitAgUkMxDksIwlOKrhlwTKLCAQC3s1PPLF8z549P17dtfYZn9/fwRhzA9ArJJm1iQBMzi318viltF5IQRBFQNdBpgGyLFTJblhGAdzIwaOIwpqueyLhcON3e3reat/74kv7L46OnCSiKZR6hQjAmk0mRAACEVEmnVVlVy0YxiBJMkyjiNHRT5HXJ3FbezsAAjcKAApoa4342nbsWNccaW04+MbvF3d3/3EfgKgNUX5DHEGUK5m1t7etXv+NdUuMfJqZug7P3Gr09PTiN6/8Dn5fDWrn1cHjrQbjFiAwAAJaWiJ169evXeHxehtisVg8k84kiahY9rlz507HAEKkuanjwfvXdMqMM13XUBsK4eSJU3jp16+gf+BDqLks3G4PGsILAQiw9BxESYHb7WYrVq5sv2vpkg5Zlq0zZ/r+iVL7hhMAwYawRmKjE8W8yjk4TNMAwBBqCIGIkEuNYO+e3fjRD3+AXb94Hmc/PIcq2XvFCZk5q3PZ7V+5e9mSu1pbGxoFAVVOJRDtq5FXc3o6nS76gn6vKksAFCguCfV1fnz/yfsQCNRg968OY9fPT+FY71Fs3/Yklq9YnlekYvFIz1v9H7z/7uBQdOpYKplJA0xwWoflRuLWisWMAMGo8syBLKUAWBA4Ry6vYf48Px56dANWLb8d3962FwNnT2PX7jRtfmxTYnJi6NiBg0e7x0bHRw2Oc4LAFM7JsP1el0KwN+Vz+UJyciqVB2Mo6hZgatA0A2ouh48/uQAwN6YzKnw11fB4vdB0E6tWdS3oOdJ7JhodP2ZwDAMQOScLsxhYIuyCyaq51KWx8Wnw24IgAJzgdkkAY8iqJn656zV6Ye9hpumlo8HGeztZtUcwk2kNwBXNGa72Acc1IACwVDWXiMfjBYhVpSEhSnC5XKip8aPnRD9NJDKs1L+BrKqRz+djeiE7Hp/KJMo+7MWdPj3sG7lNns/miykYHLUL6kFMIb/Pi68uvgM1tQGmKBIyqsYNg4MgsbbWZsRGhlNqrjCEUgPisw1ezgAAgDFGoigVIfngkrwYGxlMnR/8d+b5n22ef+78p554MoX3TvUL3UeOw19bj5ZIC/pPvT0JII+rqZ+1ibD1IqK0phWmE5eG8clQbPjFl1/tvjh6YSKTLcYf/eYDDzU2BJf89Lmlru9s2hA6/rcBBOr9/M0LsSHGWNae67OehP+VAVmWrL6+vr+omUuFD/5xbuCv7/f1FgvFJAD9mbODB1cuW7y2s2NRUzgcuvXpxzd+qzkyd14qNT3AGJJEsxtAlcbsBUkSRVmRPb657obL8fS4rpvTABSU9FUA5ADgloWhuqWLmruamm6+9YXf/uGAqRdidvDPSHDlxHMdgMpfIuiKI/Gz28EA6IoizdE0I4MKCTFDAc4eoGTXHjip4lo+kJbHbvnd55hBghsFuPb/a73MdM+MkZwAzJTmSoeOg92oMSeUX6Y5+sD4vwb4D1uZectGpBGcAAAAAElFTkSuQmCC'), auto;
    transition: background-color 0.5s, color 0.5s;
    min-height: 100vh;
    
/*overflow: hidden;*/
}

/* ========== 紧凑布局容器 ========== */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
    box-sizing: border-box;
}

/* ========== 最大化图片区域 ========== */
#image-container {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
}

#image {
    max-width: 100%;
    max-height: 85vh;  /* 增加图片显示区域 */
    height: auto;
    width: auto;
    object-fit: contain;
}

/* ========== 按钮组 ========== */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 15px 0;
    width: 100%;
    max-width: 800px;
}

.button {
    background-color: #008CBA;
    color: #fff;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
    flex-shrink: 0; /* 防止按钮缩小 */
    z-index: 200;
}

/* ========== 主题切换按钮 ========== */
.toggleButton {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 999;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.home {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    width:9vh;
    height: auto;
}

/* ========== 亮色模式 ========== */
body.light-mode {
    background-color: #ffffff;
    color: #333333;
}

body.light-mode .button {
    background-color: #008CBA;
    border-color: #4CAF50;
}

/* ========== 暗色模式 ========== */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

body.dark-mode .button {
    background-color: #1e88e5;
    border-color: #43a047;
}
/* ========== 紧凑文字区域 ========== */
#imageLink {
    margin: 5px auto;  /* 减少外边距 */
    padding: 5px;  /* 减少内边距 */
    font-size: 12px;
    line-height: 1.2;
}

/* ========== 主题切换按钮 ========== */
.toggleButton {
    top: 28px;
    right: 8px;
    padding: 6px 12px;
    font-size: 14px;
}

/* ========== 响应式调整 ========== */
@media (max-width: 768px) {
    #image {
        max-height: 82vh;  /* 移动端增加显示高度 */
    }
    
    .button {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    #imageLink {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    #image {
        max-height: 80vh;
    }
    
    .button-group {
        gap: 3px;
    }
    
    .toggleButton {
        padding: 4px 8px;
    }
}