:root {
    --w7-font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", "Microsoft YaHei", sans-serif;
    --w7-surface: #f0f0f0;
    --w7-w-space: 6px;
    --w7-w-bd: #000000b3;
    --w7-w-bdr: 6px;
    --w7-w-bg: #4580c4;
    --w7-w-glass: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px), linear-gradient(54deg, #0002 0 4%, #6661 6% 6%, #0002 8% 10%, #0002 15% 16%, #aaa1 17% 18%, #0002 23% 24%, #bbb2 25% 26%, #0002 31% 33%, #0002 34% 34.5%, #bbb2 36% 40%, #0002 41% 41.5%, #bbb2 44% 45%, #bbb2 46% 47%, #0002 48% 49%, #0002 50% 50.5%, #0002 56% 56.5%, #bbb2 57% 63%, #0002 67% 69%, #bbb2 69.5% 70%, #0002 73.5% 74%, #bbb2 74.5% 79%, #0002 80% 84%, #aaa2 85% 86%, #0002 87%, #bbb1 90%) left center/100vw 100vh no-repeat fixed;
    --w7-w-grad: linear-gradient(to right, #ffffff66, #0000001a, #ffffff33), var(--w7-w-bg);
    --w7-wct-bd: #0000004d;
    --w7-wct-bdr: 5px;
    --w7-wct-sd: inset 0 0 0 1px #fffa;
    --w7-wct-bg: linear-gradient(#ffffff80, #ffffff4d 45%, #0000001a 50%, #0000001a 75%, #ffffff80);
    --w7-wct-bg-h: radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 0);
    --w7-wct-bg-a: radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 0);
    --w7-wct_close-bg: radial-gradient(circle at -60% 50%, #0007 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #0007 5% 10%, #0000 50%), linear-gradient(#e0a197e5, #cf796a 25% 50%, #d54f36 50%);
    --w7-link-c: #06c;
    --w7-link-c-h: #39f;
}

/* --- 2. 全局设置 --- */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font: var(--w7-font);
    
    /* 使用渐变作为演示背景 (你可以换成你的 xwgc.png) */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background-image: url('./xwgc.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 3. 背景磨砂处理层 --- */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(5px); 
    z-index: -1;
}

/* --- 4. Win7 Aero 玻璃方框 (7.css 风格) --- */
.glass-window {
    width: 900px;
    max-width: 90%;
    height: 95vh;
    
    border: 1px solid var(--w7-w-bd);
    border-radius: var(--w7-w-bdr);
    box-shadow: 2px 2px 10px 1px var(--w7-w-bd), inset 0 0 0 1px #fffa;
    
    position: relative;
    z-index: 0;
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.glass-window::before {
    background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), var(--w7-w-grad);
    background-color: var(--w7-w-bg);
    box-shadow: inset 0 0 0 1px #fffd;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    border-radius: var(--w7-w-bdr);
    opacity: 0.6;
}

.glass-window::after {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--w7-w-bdr);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -10;
}

/* --- 5. 窗口顶部标题栏 (7.css 风格) --- */
.window-header {
    align-items: center;
    background: var(--w7-w-glass);
    background-attachment: fixed;
    background-color: var(--w7-w-bg);
    border: 0;
    border-radius: var(--w7-w-bdr) var(--w7-w-bdr) 0 0;
    box-shadow: inset 0 1px 0 #fffd, inset 1px 0 0 #fffd, inset -1px 0 0 #fffd;
    display: flex;
    font: var(--w7-font);
    justify-content: space-between;
    padding: var(--w7-w-space);
    padding-top: 0;
    min-height: 30px;
    flex-shrink: 0;
}

.window-header > span {
    color: #000;
    letter-spacing: 0;
    line-height: 15px;
    padding-top: var(--w7-w-space);
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}

/* --- 6. 窗口控制按钮 (7.css 原生样式) --- */
.title-bar-controls {
    background: #fff3;
    border: 1px solid var(--w7-w-bd);
    border-radius: 0 0 var(--w7-wct-bdr) var(--w7-wct-bdr);
    border-top: 0;
    box-shadow: 0 1px 0 #fffa, 1px 0 0 #fffa, -1px 0 0 #fffa;
    display: flex;
}

.title-bar-controls button {
    background: var(--w7-wct-bg);
    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--w7-wct-bd);
    box-shadow: var(--w7-wct-sd);
    box-sizing: border-box;
    min-height: 19px;
    min-width: 29px;
    padding: 0;
    position: relative;
    cursor: pointer;
}

.title-bar-controls button:first-child {
    border-bottom-left-radius: var(--w7-wct-bdr);
}

.title-bar-controls button:last-child {
    border-right: 0;
    border-bottom-right-radius: var(--w7-wct-bdr);
}

/* 最小化按钮 */
.title-bar-controls button[aria-label=Minimize] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg);
}

/* 最大化按钮 */
.title-bar-controls button[aria-label=Maximize] {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg);
}

/* 关闭按钮 */
.title-bar-controls button[aria-label=Close] {
    min-width: 48px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), var(--w7-wct_close-bg);
}

/* 悬停效果 - 最小化和最大化 */
.title-bar-controls button[aria-label=Minimize]:hover,
.title-bar-controls button[aria-label=Maximize]:hover {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg-h);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
}

.title-bar-controls button[aria-label=Maximize]:hover {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg-h);
    box-shadow: 0 0 7px 3px #5dc4f0, var(--w7-wct-sd);
}

/* 悬停效果 - 关闭按钮 */
.title-bar-controls button[aria-label=Close]:hover {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), radial-gradient(circle at 50% 170%, #f4e676 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000a 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000a 5% 10%, #0000 50%), linear-gradient(#fb9d8b, #ee6d56 25% 50%, #d42809 50%);
    box-shadow: 0 0 7px 3px #e68e75, var(--w7-wct-sd);
}

/* 点击效果 */
.title-bar-controls button[aria-label=Minimize]:active,
.title-bar-controls button[aria-label=Maximize]:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px, var(--w7-wct-bg-a);
}

.title-bar-controls button[aria-label=Maximize]:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%, var(--w7-wct-bg-a);
}

.title-bar-controls button[aria-label=Close]:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%, var(--w7-wct-bg), radial-gradient(circle at 50% 170%, #dcc03f 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000 5% 10%, #0000 50%), linear-gradient(#d1a894, #b67562 25% 50%, #7d0d01 50%);
}

/* --- 7. 内容区域 (7.css window-body 风格) --- */
.content-area {
    background: var(--w7-surface);
    border: 1px solid var(--w7-w-bd);
    box-shadow: 0 0 0 1px #fff9;
    margin: var(--w7-w-space);
    margin-top: 0;
    padding: 30px;
    flex-grow: 1;
    color: #222;
    line-height: 1.8;
    overflow-y: auto;
    font: var(--w7-font);
    font-size: 10pt;
}

/* --- 8. 自定义滚动条 (Win7 风格) --- */
.content-area::-webkit-scrollbar {
    width: 17px;
}

.content-area::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-left: 1px solid #cfcfcf;
}

.content-area::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #e8e8e8, #cfcfcf);
    border: 1px solid #ababab;
    border-radius: 0;
}

.content-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #f0f0f0, #d8d8d8);
    border-color: #96969b;
}

/* --- 9. 链接样式 (7.css 风格) --- */
a {
    color: var(--w7-link-c);
    text-decoration: none;
}

a:focus,
a:hover {
    color: var(--w7-link-c-h);
    text-decoration: underline;
}

/* --- 10. 标题样式 --- */
h1 {
    color: #039;
    font-size: 17pt;
    font-weight: 400;
    font-family: Calibri, "Noto Sans", "Microsoft YaHei", sans-serif;
    margin-top: 0;
}

h1 {
    color: #039;
    font-size: 14pt;
    font-weight: 400;
    font-family: Calibri, "Noto Sans", "Microsoft YaHei", sans-serif;
    margin-top: 0;
}

h3 {
    color: #039;
    font-size: 11pt;
    font-weight: 400;
}

/* --- 11. 导航栏样式 --- */
.hotbar {
    font: var(--w7-font);
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #cfcfcf;
}

/* --- 12. 图片样式 --- */
.content-area img {
    max-width: 100%;
    height: auto;
    border: 1px solid #cfcfcf;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.guestbook-container {
    width: 100%;
    height: 500px;
    margin: 20px 0;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

.guestbook-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}