*{
box-sizing:border-box;
}
body{
margin:0;
font-family:system-ui,-apple-system,sans-serif;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
background-size:cover;
color:#eaeaea;
overflow:hidden;
height:100vh;
user-select:none;
}
#desktop{
position:relative;
height:calc(100vh - 40px);
padding:10px;
}
.desktop-icon{
width:80px;
text-align:center;
margin:10px;
display:inline-block;
cursor:pointer;
padding:6px;
border-radius:6px;
}
.desktop-icon:hover{
background:rgba(255,255,255,0.1);
}
.desktop-icon .icon{
width:48px;
height:48px;
margin:0 auto 4px;
background:#3498db;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:20px;
}
.desktop-icon .icon-notes{
background:#27ae60;
}
.desktop-icon .icon-terminal{
background:#e67e22;
}
.desktop-icon .label{
font-size:12px;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.window{
position:absolute;
width:320px;
height:220px;
background:#1b2735;
border:1px solid #34495e;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
display:flex;
flex-direction:column;
overflow:hidden;
}
.title-bar{
background:#2c3e50;
padding:6px 8px;
display:flex;
align-items:center;
justify-content:space-between;
cursor:grab;
}
.title-bar:active{
cursor:grabbing;
}
.title-bar .title{
font-size:13px;
font-weight:600;
}
.title-bar .controls{
display:flex;
gap:6px;
}
.control-btn{
width:14px;
height:14px;
border-radius:50%;
border:none;
cursor:pointer;
}
.close-btn{
background:#e74c3c;
}
.min-btn{
background:#f1c40f;
}
.content{
flex:1;
padding:8px;
overflow:auto;
font-size:13px;
user-select:text;
}
.notes-area{
width:100%;
height:140px;
background:#0f1720;
color:#eaeaea;
border:1px solid #34495e;
border-radius:4px;
padding:6px;
resize:none;
}
.terminal-window{
background:#0b1220;
padding:6px;
border-radius:4px;
height:140px;
overflow:auto;
font-family:monospace;
font-size:12px;
}
#taskbar{
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
background:rgba(20,30,40,0.9);
border-top:1px solid #34495e;
display:flex;
align-items:center;
padding:0 10px;
gap:10px;
}
#start-btn{
background:#3498db;
border:none;
color:white;
padding:6px 10px;
border-radius:4px;
cursor:pointer;
font-weight:600;
}
#minimized-apps{
display:flex;
gap:6px;
align-items:center;
}
.minimized-btn{
background:#34495e;
border:none;
color:white;
padding:5px 9px;
border-radius:4px;
cursor:pointer;
font-size:12px;
}
.minimized-btn:hover{
background:#4b6584;
}
.file-item{
width:70px;
text-align:center;
cursor:pointer;
padding:6px;
border-radius:6px;
}
.file-item:hover{
background:rgba(255,255,255,0.08);
}
.file-icon{
font-size:28px;
margin-bottom:4px;
}
.file-name{
font-size:11px;
word-break:break-word;
}