* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: sans-serif; }

#screen { width: 100vw; height: 100vh; display: flex; flex-direction: column; }

#desktop { 
    flex: 1; position: relative; 
    background: url('images/wallpaper.png') no-repeat center/cover; 
    padding: 20px; 
}

.icon { width: 80px; text-align: center; cursor: pointer; }
.icon-img { font-size: 40px; }
.icon-text { font-size: 12px; color: #333; margin-top: 5px; text-shadow: 0 0 5px #fff; }

/* 窗口样式 */
.window { 
    position: absolute; 
    /* 1. 先将窗口左上角定位到屏幕正中心 */
    top: 50%; 
    left: 50%; 
    
    /* 2. 这里的宽高可以根据你的需要微调，目前保持你截图中的大比例 */
    width: 1000px; 
    height: 700px; 
    
    /* 3. 核心：通过 translate 将窗口向左向上偏移自身宽高的一半，实现彻底居中 */
    transform: translate(-50%, -50%); 
    
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: none; 
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}
.window.show { display: flex; }

.window-header { 
    background: #f3f3f3; padding: 10px 15px; 
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #ddd;
}
.app-iframe { flex: 1; width: 100%; height: 100%; border: none; }
.close-btn { border: none; background: none; font-size: 20px; cursor: pointer; }

/* 任务栏略（保持之前的代码即可） */
#taskbar { height: 48px; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; align-items: center; padding: 0 15px; border-top: 1px solid #ccc; }
.system-tray { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.tray-datetime { text-align: right; font-size: 11px; }
.search-box { background: #fff; padding: 5px 10px; border-radius: 4px; border: 1px solid #ddd; margin-left: 10px; display: flex; align-items: center; }
.search-box input { border: none; outline: none; margin-left: 5px; font-size: 12px; width: 180px; }


/* 便签整体样式 */
.desktop-note {
    position: absolute;
    right: 40px;          /* 距离屏幕右侧 40 像素 */
    top: 60px;            /* 距离屏幕顶部 60 像素，避开底部任务栏 */
    width: 300px;         /* 宽度 */
    background: rgba(255, 255, 255, 0.75); /* 半透明白色背景 */
    backdrop-filter: blur(8px);           /* 磨砂玻璃模糊效果（非常高级） */
    border-radius: 8px;   /* 圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 淡淡的阴影，增加立体感 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-family: "Microsoft YaHei", sans-serif;
    overflow: hidden;
    z-index: 10;          /* 确保在壁纸上方 */
}

/* 便签顶部标题栏 */
.note-header {
    background: rgba(240, 210, 215, 0.6); /* 淡淡的粉粉色，匹配你的壁纸花朵 */
    padding: 10px 15px;
    font-weight: bold;
    color: #555;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* 便签正文内容 */
.note-content {
    padding: 15px;
    color: #444;
    font-size: 14px;
    line-height: 1.6;     /* 行高，让文字更易读 */
}

.note-content p {
    margin-bottom: 12px;
}

/* 强调的核心指引 */
.guide-tip {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc; /* 虚线分割线 */
    color: #db7093;       /* 使用苍紫/粉色系强调 */
    font-weight: bold;
}