body {
  margin: 0; padding: 0;
  background-image: url('https://images.unsplash.com/photo-1507146426996-ef05306b995a?q=80&w=1080'); 
  background-size: cover; height: 100vh; overflow: hidden; font-family: sans-serif;
}

.desktop { padding: 20px; display: flex; flex-direction: column; gap: 15px; }

.icon {
  width: 70px; padding: 10px; text-align: center; color: white; cursor: pointer;
  font-weight: bold; text-shadow: 2px 2px 4px #000000; border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
.icon:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.icon-emoji { font-size: 35px; margin-bottom: 5px; }

#taskbar {
  position: absolute; bottom: 0; width: 100%; height: 45px; 
  background-color: rgba(15, 15, 25, 0.85); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: space-between; 
  padding: 0 20px; color: white; box-sizing: border-box; z-index: 9999;
}

.start-btn {
  cursor: pointer; padding: 8px 20px; border-radius: 8px; font-weight: bold;
  background: linear-gradient(90deg, #5e35b1, #ff4757); border: none; color: white;
}
.start-btn:hover { opacity: 0.9; }

#start-menu {
  position: absolute; bottom: 55px; left: 10px; width: 250px;
  background-color: rgba(20, 20, 30, 0.95); border-radius: 10px;
  display: none; flex-direction: column; padding: 10px 0; color: white; z-index: 9998;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.start-item { padding: 12px 20px; cursor: pointer; font-size: 16px; }
.start-item:hover { background-color: #5e35b1; }

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.window {
  width: 350px; height: 200px; background: white; position: absolute;
  border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,0.7);
  overflow: hidden; display: none; z-index: 10;
  animation: popIn 0.2s ease-out;
}

.title-bar {
  background: #1a1a2e; color: white; padding: 10px 15px; display: flex;
  justify-content: space-between; font-weight: bold; cursor: grab; 
}
.title-bar button {
  background: #ff4757; color: white; border: none; border-radius: 50%;
  width: 20px; height: 20px; cursor: pointer; font-size: 10px; line-height: 20px; text-align: center;
}

.content { padding: 15px; }

#notepad-text {
  width: 100%; height: calc(100% - 40px); box-sizing: border-box; border: none;
  resize: none; padding: 10px; font-family: monospace; font-size: 14px;
  background-color: #fcfcfc; outline: none;
}

#terminal-body {
  background-color: #0c0c0c; color: #00ff00; padding: 10px; font-family: monospace;
  height: calc(100% - 40px); overflow-y: auto; box-sizing: border-box;
}
.cmd-line { margin: 0 0 5px 0; }

.progress-bar {
  width: 100%; height: 15px; background-color: #dcdde1; 
  border-radius: 10px; overflow: hidden; margin-top: 5px;
}
.progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, #00a8ff, #9c88ff);
  transition: width 2s ease-in-out;
}
.compiz-active {
  box-shadow: 0 30px 60px rgba(0,255,255,0.4), inset 0 0 15px rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8) !important;
}
#task-list li {
  background: #f1f2f6;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

#task-list li:hover {
  background: #dfe4ea;
}

.task-done {
  text-decoration: line-through;
  color: #a4b0be;
  background: #f8f9fa !important;
}