* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  user-select: none;
}

:root {
  --berry-50: #fdf2f8;
  --berry-100: #fce7f3;
  --berry-200: #fbcfe8;
  --berry-300: #f9a8d4;
  --berry-400: #f472b6;
  --berry-500: #ec4899;
  --berry-600: #db2777;
  --berry-700: #be185d;
  --berry-800: #9d174d;
  --berry-900: #831843;
  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.18);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.25);
  --title-bar-bg: rgba(255,255,255,0.08);
}

.dark-theme {
  --glass-bg: rgba(15,15,30,0.65);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.5);
  --title-bar-bg: rgba(0,0,0,0.3);
}

.light-theme {
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.6);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --title-bar-bg: rgba(255,255,255,0.4);
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-strong {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(2);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.window-enter {
  animation: windowOpen 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.window-exit {
  animation: windowClose 0.2s ease-in forwards;
}

@keyframes windowOpen {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes windowClose {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.88) translateY(20px); }
}

.minimize-anim {
  animation: minimizeWin 0.3s ease-in forwards;
}

@keyframes minimizeWin {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.4) translateY(80vh); }
}

.start-menu-enter {
  animation: slideUp 0.25s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.start-menu-exit {
  animation: slideDown 0.2s ease-in forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(0.97); }
}

.desktop-icon:hover {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}

.desktop-icon:active {
  background: rgba(255,255,255,0.2);
}

.taskbar-icon:hover {
  background: rgba(255,255,255,0.15);
}

.title-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.title-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
}

.title-btn-close { background: #ff5f57; }
.title-btn-minimize { background: #ffbd2e; }
.title-btn-maximize { background: #28c840; }

.resize-handle {
  position: absolute;
}
.resize-handle-n { top: -4px; left: 8px; right: 8px; height: 8px; cursor: n-resize; }
.resize-handle-s { bottom: -4px; left: 8px; right: 8px; height: 8px; cursor: s-resize; }
.resize-handle-e { right: -4px; top: 8px; bottom: 8px; width: 8px; cursor: e-resize; }
.resize-handle-w { left: -4px; top: 8px; bottom: 8px; width: 8px; cursor: w-resize; }
.resize-handle-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: ne-resize; }
.resize-handle-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
.resize-handle-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: se-resize; }
.resize-handle-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }

.terminal-input {
  background: transparent;
  border: none;
  outline: none;
  color: #4ade80;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  width: 100%;
  caret-color: #4ade80;
}

.calc-btn {
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  font-family: 'DM Sans', sans-serif;
}

.calc-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

.calc-btn:active {
  transform: scale(0.96);
}

.paint-canvas {
  cursor: crosshair;
  border-radius: 8px;
}

.context-menu {
  animation: ctxOpen 0.15s ease-out;
}

@keyframes ctxOpen {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.context-item:hover {
  background: rgba(236, 72, 153, 0.25);
}

.shutdown-screen {
  animation: shutdownFade 2s ease-in forwards;
}

@keyframes shutdownFade {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; background: #000; }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

.small-screen-msg {
  display: none;
}

@media (max-width: 768px) {
  .small-screen-msg {
    display: flex !important;
  }
  .desktop-main {
    display: none !important;
  }
}