:root{
  --xp-blue:#2f6fb2;
  --bg:#dbe9fb;
  --window:#ffffff;
  --header-grad: linear-gradient(180deg,#3b78c2,#2f6fb2);
  --shadow: 0 6px 18px rgba(27,40,60,0.2);
  --accent:#ffcf66;
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#desktop{height:100%;margin:0;padding:0}

#desktop{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background: linear-gradient(180deg,#a9d0ff 0%, #dbe9fb 60%);
}

/* wallpaper area (you can replace background-image in #wallpaper) */
#wallpaper{
  position:absolute;inset:0;
  background-image: url('assets/wallpaper.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.95;
  filter: saturate(1.05);
}

/* left icons */
#icons-column{
  position: absolute;
  left: 16px;
  top: 60px;
  width: 120px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index: 10;
}

.desktop-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  cursor:pointer;
  user-select:none;
  text-align:center;
  color:#08304a;
}

.desktop-icon img{
  width:64px;height:64px;border-radius:8px;
  box-shadow: 0 4px 10px rgba(10,30,60,0.12);
  background:rgba(255,255,255,0.85);
  padding:8px;
}

.desktop-icon span{
  margin-top:6px;font-size:13px;
  background:rgba(255,255,255,0.6);
  padding:3px 6px;border-radius:6px;
}

/* taskbar */
#taskbar{
  position: absolute;
  left:0;right:0;bottom:0;height:44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(0,0,0,0.05));
  border-top: 1px solid rgba(10,30,60,0.06);
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px; z-index:50;
  backdrop-filter: blur(5px);
}

#start-btn{
  padding:6px 10px;border-radius:6px;border: none;background:var(--xp-blue);color:white;font-weight:600;cursor:pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}

/* windows */
.app-window{
  position: absolute;
  width:520px;
  height:360px;
  left: calc(50% - 260px);
  top: calc(50% - 180px);
  background: var(--window);
  border-radius:6px;
  box-shadow: var(--shadow);
  z-index: 30;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border: 1px solid rgba(10,30,60,0.06);
}

/* header bar */
.win-header{
  height:36px;
  background: var(--header-grad);
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  cursor: grab;
  user-select:none;
}

.win-header:active{cursor:grabbing}

.win-title{font-weight:600}

.win-controls{display:flex; gap:6px; align-items:center}

.win-btn{
  width:32px;height:26px;border-radius:4px;border:none;cursor:pointer;font-weight:700;
  background:rgba(255,255,255,0.12); color:white;
}

.win-btn:hover{background:rgba(255,255,255,0.2)}

.win-iframe{
  flex:1;border:0;width:100%;height:100%;
}

/* small responsive */
@media (max-width:640px){
  .app-window{width:90%;height:60%;}
  #icons-column{left:8px;top:40px}
}