@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: -apple-system, "Segoe UI", "Bricolage Grotesque", system-ui, sans-serif; }
#root { height: 100%; }

/* ===== Windows / Aero frame ===== */
.win-frame {
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.3) inset;
  border: 1px solid rgba(255,255,255,0.35);
  overflow: hidden;
  transition: box-shadow 0.15s;
  animation: winOpen 0.16s ease-out;
}
@keyframes winOpen { from { transform: scale(0.96); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }
.win-active { box-shadow: 0 14px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(120,200,255,0.5) inset; }
.win-inactive { opacity: 0.94; }
.win-inactive .win-titlebar { filter: saturate(0.6) brightness(0.9); }

.win-titlebar {
  background: linear-gradient(180deg, rgba(90,160,220,0.95) 0%, rgba(50,110,180,0.95) 48%, rgba(40,95,165,0.97) 52%, rgba(60,130,200,0.95) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.win-ctrl {
  width: 26px; height: 20px; border-radius: 4px;
  background: rgba(255,255,255,0.18);
  color: #fff; font-size: 12px; line-height: 1;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, transform 0.1s;
}
.win-ctrl:hover { background: rgba(255,255,255,0.4); }
.win-ctrl:active { transform: scale(0.9); }
.win-close:hover { background: #e53935; border-color: #ff8a80; }

/* ===== Generic Aero button ===== */
.win-btn {
  background: linear-gradient(180deg, #fbfdff 0%, #e3ecf5 50%, #d3e0ee 51%, #e8f0f8 100%);
  border: 1px solid #9db4cc;
  border-radius: 5px;
  color: #223;
  transition: all 0.1s;
}
.win-btn:hover { background: linear-gradient(180deg, #fdffff 0%, #eaf4ff 50%, #d0e6ff 51%, #eaf6ff 100%); border-color: #5b9bd5; }
.win-btn:active { background: linear-gradient(180deg, #cfe0f0 0%, #bcd2e8 100%); transform: translateY(1px); }

/* ===== Taskbar ===== */
.taskbar {
  background: linear-gradient(180deg, rgba(30,50,80,0.72) 0%, rgba(15,30,55,0.85) 100%);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.start-orb {
  background: radial-gradient(circle at 35% 30%, #ffd0e0, #e0447a 55%, #a01050);
  box-shadow: 0 0 12px rgba(255,120,180,0.6), inset 0 2px 4px rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: orbPulse 3s ease-in-out infinite;
}
.start-orb:hover { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,120,180,0.9); }
.start-orb:active { transform: scale(0.95); }
@keyframes orbPulse { 0%,100% { box-shadow: 0 0 10px rgba(255,120,180,0.5); } 50% { box-shadow: 0 0 18px rgba(255,150,200,0.85); } }

.task-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.12s;
}
.task-btn:hover { background: rgba(255,255,255,0.22); }
.task-active {
  background: linear-gradient(180deg, rgba(150,210,255,0.35), rgba(90,160,230,0.25));
  border-color: rgba(160,220,255,0.6);
  box-shadow: inset 0 0 8px rgba(150,210,255,0.4);
}

/* ===== Start Menu ===== */
.start-menu {
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
}

/* ===== Desktop icons ===== */
.desktop-icon { transition: background 0.1s; }

/* ===== Animations ===== */
.boot-pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } }
.fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide-up { animation: slideUp 0.18s ease-out; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #cfe0f0, #a9c4e0); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }

input[type=range] { accent-color: #2fa5d6; }
button { cursor: pointer; }