/* ==========================================================================
   RESET & THEMES CONFIGURATION
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none; /* Desktop feeling */
}

/* Base Fonts */
:root {
  --font-pixel: 'VT323', monospace;
  --font-mono: 'Share Tech Mono', monospace;
  --font-sans: 'Outfit', sans-serif;
  
  /* DEFAULT THEME: NEON SUNSET (VAPORWAVE) */
  --bg-desktop: #0b021a;
  --win-bg: rgba(18, 5, 30, 0.85);
  --win-border: #ff71ce;
  --win-border-inner: #b967ff;
  --win-header-bg: linear-gradient(90deg, #ff71ce, #b967ff);
  --win-header-text: #ffffff;
  --win-title-shadow: 2px 2px #000;
  --text-main: #e8e6e3;
  --text-accent: #01cdfe;
  --text-dim: #a59fb2;
  --btn-classic-bg: #b967ff;
  --btn-classic-border: #ff71ce;
  --btn-classic-text: #ffffff;
  --taskbar-bg: rgba(13, 2, 28, 0.95);
  --taskbar-border: #ff71ce;
  --start-btn-bg: linear-gradient(135deg, #ff71ce, #b967ff);
  --start-btn-text: #ffffff;
  --term-bg: #030107;
  --term-text: #05ffa1;
  --term-accent: #ff71ce;
  --shadow-neon: 0 0 10px rgba(255, 113, 206, 0.5), 0 0 20px rgba(185, 103, 255, 0.3);
  --active-outline: 2px dashed #01cdfe;
}

/* THEME 2: CLASSIC GRAY (WINDOWS 95) */
body.theme-win95 {
  --bg-desktop: #008080;
  --win-bg: #c0c0c0;
  --win-border: #ffffff;
  --win-border-inner: #808080;
  --win-header-bg: linear-gradient(90deg, #000080, #1084d0);
  --win-header-text: #ffffff;
  --win-title-shadow: none;
  --text-main: #000000;
  --text-accent: #000080;
  --text-dim: #555555;
  --btn-classic-bg: #c0c0c0;
  --btn-classic-border: #808080;
  --btn-classic-text: #000000;
  --taskbar-bg: #d0d0d0;
  --taskbar-border: #ffffff;
  --start-btn-bg: #c0c0c0;
  --start-btn-text: #000000;
  --term-bg: #000000;
  --term-text: #ffffff;
  --term-accent: #ffff00;
  --shadow-neon: none;
  --active-outline: 1px dotted #000000;
}

/* THEME 3: TOXIC HACK (CYBERPUNK) */
body.theme-cyberpunk {
  --bg-desktop: #050505;
  --win-bg: rgba(5, 5, 5, 0.95);
  --win-border: #fcee0a;
  --win-border-inner: #00ff00;
  --win-header-bg: #fcee0a;
  --win-header-text: #000000;
  --win-title-shadow: none;
  --text-main: #39ff14;
  --text-accent: #00ffff;
  --text-dim: #00aa00;
  --btn-classic-bg: #000000;
  --btn-classic-border: #fcee0a;
  --btn-classic-text: #fcee0a;
  --taskbar-bg: #000000;
  --taskbar-border: #fcee0a;
  --start-btn-bg: #fcee0a;
  --start-btn-text: #000000;
  --term-bg: #000000;
  --term-text: #39ff14;
  --term-accent: #fcee0a;
  --shadow-neon: 0 0 8px rgba(0, 255, 0, 0.4), 0 0 15px rgba(252, 238, 10, 0.2);
  --active-outline: 2px dashed #00ffff;
}

/* THEME 4: ICE CRYSTAL (HOLOGRAM) */
body.theme-hologram {
  --bg-desktop: #0a0f1d;
  --win-bg: rgba(10, 25, 45, 0.75);
  --win-border: #7df9ff;
  --win-border-inner: #4ba3e3;
  --win-header-bg: rgba(15, 45, 75, 0.9);
  --win-header-text: #e0f7fa;
  --win-title-shadow: 0 0 4px #7df9ff;
  --text-main: #e0f7fa;
  --text-accent: #b2ebf2;
  --text-dim: #78909c;
  --btn-classic-bg: rgba(10, 25, 45, 0.6);
  --btn-classic-border: #7df9ff;
  --btn-classic-text: #7df9ff;
  --taskbar-bg: rgba(5, 15, 30, 0.9);
  --taskbar-border: #7df9ff;
  --start-btn-bg: rgba(15, 45, 75, 0.8);
  --start-btn-text: #7df9ff;
  --term-bg: rgba(2, 8, 15, 0.95);
  --term-text: #7df9ff;
  --term-accent: #e0f7fa;
  --shadow-neon: 0 0 12px rgba(125, 249, 255, 0.4);
  --active-outline: 2px solid #7df9ff;
}

/* ==========================================================================
   GLOBAL LAYOUT & CRT FILTER
   ========================================================================== */
html, body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-sans);
  background-color: var(--bg-desktop);
  color: var(--text-main);
  position: relative;
}

#desktop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* CRT Screen Shader Effect */
#crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: 
    repeating-linear-gradient(
      rgba(0, 0, 0, 0.08) 0px, 
      rgba(0, 0, 0, 0.08) 1.5px, 
      transparent 1.5px, 
      transparent 3px
    ),
    radial-gradient(
      circle at center, 
      transparent 30%, 
      rgba(0, 0, 0, 0.25) 100%
    );
  display: block;
}

body.crt-active #crt-overlay {
  animation: crt-flicker 0.15s infinite;
}

body.crt-active::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9998;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

@keyframes crt-flicker {
  0% { opacity: 0.975; }
  50% { opacity: 0.99; }
  100% { opacity: 0.98; }
}

/* Scrollbar styles for retro windows */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid var(--win-border-inner);
}
body.theme-win95 ::-webkit-scrollbar-track {
  background: #e6e6e6;
  border-left: 1px solid #808080;
}
::-webkit-scrollbar-thumb {
  background: var(--btn-classic-bg);
  border: 2px solid var(--win-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--win-border);
}

/* ==========================================================================
   DESKTOP WORKSPACE & ICONS
   ========================================================================== */
.desktop {
  position: relative;
  width: 100%;
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  z-index: 10;
  overflow: hidden;
  padding: 20px;
}

/* Icons Grid Layout */
.desktop-icons {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 90px);
  grid-auto-columns: 90px;
  gap: 15px;
  height: calc(100% - 40px);
  width: max-content;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 5px;
  border-radius: 4px;
  transition: background 0.1s;
  outline: none;
}

.icon:hover {
  background: rgba(255, 113, 206, 0.15);
  border: 1px dashed rgba(255, 113, 206, 0.3);
}

body.theme-win95 .icon:hover {
  background: rgba(0, 0, 128, 0.15);
  border: 1px dotted #000080;
}

.icon:focus {
  background: rgba(1, 205, 254, 0.2);
  border: var(--active-outline);
}

.icon-label {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.5);
  margin-top: 6px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.theme-win95 .icon-label {
  text-shadow: none;
  background: transparent;
  color: #ffffff;
}

body.theme-win95 .icon:focus .icon-label {
  background: #000080;
  color: #ffffff;
}

/* Pixel Art Vector CSS Icons */
.icon-image {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Custom CSS-drawn Icons */
.about-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M6 2h14l6 6v22H6V2z' fill='%23ffffff' stroke='%23ff71ce' stroke-width='2'/><path d='M20 2v6h6' fill='none' stroke='%23ff71ce' stroke-width='2'/><path d='M10 12h12M10 16h12M10 20h8' stroke='%23b967ff' stroke-width='2'/></svg>");
}
body.theme-win95 .about-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M6 2h14l6 6v22H6V2z' fill='%23ffffff' stroke='%23000000' stroke-width='2'/><path d='M20 2v6h6M10 12h12M10 16h12M10 20h8' stroke='%23000000' stroke-width='2'/></svg>");
}

.work-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='8' width='24' height='18' rx='2' fill='%23b967ff' stroke='%23ff71ce' stroke-width='2'/><rect x='11' y='4' width='10' height='4' rx='1' fill='none' stroke='%23ff71ce' stroke-width='2'/><path d='M4 14h24M13 18h6' stroke='%2301cdfe' stroke-width='2'/></svg>");
}
body.theme-win95 .work-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='8' width='24' height='18' fill='%23808080' stroke='%23000000' stroke-width='2'/><rect x='11' y='4' width='10' height='4' fill='none' stroke='%23000000' stroke-width='2'/><path d='M4 14h24' stroke='%23000000' stroke-width='2'/></svg>");
}

.skills-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='2' y='4' width='28' height='20' rx='2' fill='%2312051e' stroke='%2301cdfe' stroke-width='2'/><path d='M10 24v4M22 24v4M6 28h20' stroke='%2301cdfe' stroke-width='2'/><path d='M7 9l4 3-4 3' fill='none' stroke='%2305ffa1' stroke-width='2'/><line x1='13' y1='15' x2='20' y2='15' stroke='%2305ffa1' stroke-width='2'/></svg>");
}
body.theme-win95 .skills-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='2' y='4' width='28' height='20' fill='%23000000' stroke='%23c0c0c0' stroke-width='2'/><path d='M10 24v4M22 24v4M6 28h20' stroke='%23c0c0c0' stroke-width='2'/><path d='M7 9l4 3-4 3' fill='none' stroke='%23ffffff' stroke-width='2'/></svg>");
}

.projects-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 6h8l3 4h13v16H4V6z' fill='%2312051e' stroke='%23fffb96' stroke-width='2'/><path d='M4 10h24' stroke='%23fffb96' stroke-width='2'/></svg>");
}
body.theme-win95 .projects-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 6h8l3 4h13v16H4V6z' fill='%23c0c0c0' stroke='%23808080' stroke-width='2'/></svg>");
}

.edu-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 4L4 10l12 6 12-6-12-6z' fill='%2301cdfe' stroke='%23ff71ce' stroke-width='2'/><path d='M8 12.5v7.1c0 2.2 3.6 4.4 8 4.4s8-2.2 8-4.4v-7.1' fill='none' stroke='%23ff71ce' stroke-width='2'/><path d='M24 11v11' fill='none' stroke='%23fffb96' stroke-width='2'/></svg>");
}
body.theme-win95 .edu-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 4L4 10l12 6 12-6-12-6z' fill='none' stroke='%23000000' stroke-width='2'/><path d='M8 12.5v7.1c0 2.2 3.6 4.4 8 4.4s8-2.2 8-4.4v-7.1' fill='none' stroke='%23000000' stroke-width='2'/></svg>");
}

.synth-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='3' y='6' width='26' height='20' rx='2' fill='%2312051e' stroke='%23ff71ce' stroke-width='2'/><circle cx='8' cy='12' r='2' fill='%2301cdfe'/><circle cx='14' cy='12' r='2' fill='%2301cdfe'/><circle cx='20' cy='12' r='2' fill='%2301cdfe'/><rect x='6' y='18' width='20' height='6' fill='%23ffffff'/><line x1='10' y1='18' x2='10' y2='24' stroke='%23000'/><line x1='14' y1='18' x2='14' y2='24' stroke='%23000'/><line x1='18' y1='18' x2='18' y2='24' stroke='%23000'/><line x1='22' y1='18' x2='22' y2='24' stroke='%23000'/></svg>");
}
body.theme-win95 .synth-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='3' y='6' width='26' height='20' fill='%23808080' stroke='%23000000' stroke-width='2'/><circle cx='8' cy='12' r='2' fill='%23000000'/><circle cx='14' cy='12' r='2' fill='%23000000'/><rect x='6' y='18' width='20' height='6' fill='%23ffffff'/><line x1='10' y1='18' x2='10' y2='24' stroke='%23000'/><line x1='14' y1='18' x2='14' y2='24' stroke='%23000'/></svg>");
}

/* Inline icon versions for Start Menu */
.icon-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: middle;
}
.about-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M6 2h14l6 6v22H6V2z' fill='%23ffffff' stroke='%23ff71ce' stroke-width='3'/></svg>"); }
.work-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='4' y='8' width='24' height='18' rx='2' fill='%23b967ff' stroke='%23ff71ce' stroke-width='3'/></svg>"); }
.skills-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='2' y='4' width='28' height='20' rx='2' fill='%2312051e' stroke='%2301cdfe' stroke-width='3'/></svg>"); }
.projects-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M4 6h8l3 4h13v16H4V6z' fill='%2312051e' stroke='%23fffb96' stroke-width='3'/></svg>"); }
.edu-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M16 4L4 10l12 6 12-6-12-6z' fill='%2301cdfe' stroke='%23ff71ce' stroke-width='3'/></svg>"); }
.synth-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='3' y='6' width='26' height='20' rx='2' fill='%2312051e' stroke='%23ff71ce' stroke-width='3'/></svg>"); }
.github-icon-inline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2301cdfe'><path d='M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z'/></svg>");
}
.shutdown-icon-inline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff71ce' stroke-width='3'><path d='M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10'/></svg>");
}

body.theme-win95 .about-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M6 2h14l6 6v22H6V2z' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .work-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='4' y='8' width='24' height='18' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .skills-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='2' y='4' width='28' height='20' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .projects-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M4 6h8l3 4h13v16H4V6z' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .edu-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M16 4L4 10l12 6 12-6-12-6z' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .synth-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><rect x='3' y='6' width='26' height='20' fill='none' stroke='%23000000' stroke-width='3'/></svg>"); }
body.theme-win95 .github-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23000000'><path d='M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z'/></svg>"); }
body.theme-win95 .shutdown-icon-inline { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3'><path d='M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10'/></svg>"); }

/* ==========================================================================
   WINDOW COMPONENT STYLE
   ========================================================================== */
.window {
  position: absolute;
  background-color: var(--win-bg);
  border: 2px solid var(--win-border);
  box-shadow: var(--shadow-neon);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  min-width: 280px;
  min-height: 150px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s cubic-bezier(0.1, 0.9, 0.2, 1), transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
  pointer-events: none;
  z-index: 10;
}

.window.open-window {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.window.active-window {
  z-index: 100 !important;
  box-shadow: 0 0 15px rgba(255, 113, 206, 0.7), 0 0 30px rgba(1, 205, 254, 0.4);
}

body.theme-win95 .window {
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #000000;
  border-right-color: #000000;
  border-radius: 0;
  box-shadow: 1px 1px 0px #ffffff inset, -1px -1px 0px #808080 inset, 2px 2px 5px rgba(0,0,0,0.5);
}

body.theme-win95 .window.active-window {
  box-shadow: 1px 1px 0px #ffffff inset, -1px -1px 0px #808080 inset, 3px 3px 10px rgba(0,0,0,0.6);
}

.window.minimized {
  display: none;
}

/* Window Header Bar */
.window-header {
  background: var(--win-header-bg);
  color: var(--win-header-text);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  border-bottom: 1px solid var(--win-border-inner);
}

body.theme-win95 .window-header {
  border-bottom: 1px solid #808080;
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 13px;
  padding: 4px 6px;
}

.window-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.window-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-shadow: var(--win-title-shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.theme-win95 .window-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
}

.window-icon {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
}

.file-text-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>"); }
.exe-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M9 9h6M9 13h6'/></svg>"); }
.cmd-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305ffa1' stroke-width='3'><polyline points='4 17 10 11 4 5'/><line x1='12' y1='19' x2='20' y2='19'/></svg>"); }
.folder-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>"); }
.db-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/><path d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/></svg>"); }
.audio-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/></svg>"); }

/* Controls UI: min, max, close */
.window-controls {
  display: flex;
  gap: 4px;
}

.win-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid transparent;
  color: var(--win-header-text);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.1s;
}

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

.win-close:hover {
  background: #ff5555;
  color: #fff;
}

body.theme-win95 .win-btn {
  background: #c0c0c0;
  border-top: 1.5px solid #ffffff;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #808080;
  border-right: 1.5px solid #808080;
  color: #000000;
  border-radius: 0;
  width: 16px;
  height: 14px;
  font-size: 9px;
}

body.theme-win95 .win-btn:active {
  border-top: 1.5px solid #808080;
  border-left: 1.5px solid #808080;
  border-bottom: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
  padding-top: 2px;
  padding-left: 2px;
}

/* Window Content Body */
.window-content {
  flex-grow: 1;
  overflow: auto;
  position: relative;
  background-color: rgba(10, 3, 20, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.theme-win95 .window-content {
  background-color: #ffffff;
  backdrop-filter: none;
  border: 1px solid #808080;
  margin: 2px;
}

/* Padding variations */
.pad-none { padding: 0; }
.pad-medium { padding: 18px; }

/* Scroll utilities */
.scroll-y { overflow-y: auto; overflow-x: hidden; }

/* Status Bar */
.window-statusbar {
  background: rgba(13, 2, 28, 0.85);
  border-top: 1px solid var(--win-border-inner);
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

body.theme-win95 .window-statusbar {
  background: #c0c0c0;
  border-top: 1px solid #808080;
  color: #000;
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 2px 4px;
}

/* Win95 classic beveled border style helper */
.win-btn-classic {
  background: var(--btn-classic-bg);
  border: 2px solid var(--btn-classic-border);
  color: var(--btn-classic-text);
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

.win-btn-classic:hover {
  background: var(--win-border);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
}

.win-btn-classic:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}

body.theme-win95 .win-btn-classic {
  background: #c0c0c0;
  border-top: 1.5px solid #ffffff;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #808080;
  border-right: 1.5px solid #808080;
  color: #000;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: bold;
  box-shadow: none;
}

body.theme-win95 .win-btn-classic:active {
  border-top: 1.5px solid #808080;
  border-left: 1.5px solid #808080;
  border-bottom: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
}

/* ==========================================================================
   SPECIFIC WINDOW CONTENT STYLE
   ========================================================================== */

/* ABOUT WINDOW */
.neon-heading-container {
  margin-bottom: 10px;
}
.window-subtitle {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--win-border);
  letter-spacing: 0.1em;
}
h1.glitch-text {
  font-family: var(--font-pixel);
  font-size: 42px;
  font-weight: normal;
  color: #ffffff;
  line-height: 1;
  position: relative;
  text-shadow: 3px 3px 0px var(--win-border-inner);
}
.tagline {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-accent);
  margin-bottom: 12px;
}
.bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 18px;
}
.divider {
  height: 1px;
  background: linear-gradient(90deg, var(--win-border), transparent);
  margin: 10px 0;
}
body.theme-win95 .divider {
  background: #808080;
}
.stats-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.stat-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--win-border-inner);
  padding: 8px;
  text-align: center;
  border-radius: 2px;
}
body.theme-win95 .stat-box {
  background: #c0c0c0;
  border: 1px solid #808080;
}
.stat-num {
  display: block;
  font-family: var(--font-pixel);
  font-size: 20px;
  color: var(--win-border);
}
body.theme-win95 .stat-num {
  color: #000080;
  font-weight: bold;
}
.stat-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
}
body.theme-win95 .stat-lbl {
  color: #000000;
}

/* EXPERIENCE WINDOW */
.exp-nav {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--win-border-inner);
}
body.theme-win95 .exp-nav {
  background: #d0d0d0;
  border-bottom: 1.5px solid #808080;
}
.exp-nav-tab {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-top: 3px solid transparent;
  border-right: 1px solid var(--win-border-inner);
  border-bottom: 1px solid var(--win-border-inner);
  color: var(--text-dim);
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.exp-nav-tab:hover {
  background: rgba(1, 205, 254, 0.15);
  color: #ffffff;
  border-top-color: rgba(1, 205, 254, 0.5);
}
.exp-nav-tab.active {
  background: var(--win-bg);
  color: var(--win-border);
  font-weight: bold;
  border-top: 3px solid var(--win-border);
  border-bottom: 1px solid transparent;
  text-shadow: 0 0 8px var(--win-border), 0 0 2px #fff;
  box-shadow: inset 0 2px 5px rgba(255, 113, 206, 0.1);
}
body.theme-win95 .exp-nav-tab {
  background: #d0d0d0;
  border: 1px solid #808080;
  border-right-color: #808080;
  border-bottom-color: #808080;
  border-top: 2px solid transparent;
  color: #000;
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 14px;
}
body.theme-win95 .exp-nav-tab:hover {
  background: #e0e0e0;
}
body.theme-win95 .exp-nav-tab.active {
  background: #ffffff;
  font-weight: bold;
  border-bottom: 1.5px solid transparent;
  border-top: 2px solid #000080;
}

.exp-details {
  height: calc(100% - 37px);
  position: relative;
}
.exp-section {
  display: none;
}
.exp-section.active {
  display: block;
}
.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.exp-header h2 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
}
body.theme-win95 .exp-header h2 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: bold;
}
.exp-header .accent {
  color: var(--win-border);
}
body.theme-win95 .exp-header .accent {
  color: #000080;
}
.exp-date {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--text-accent);
}
body.theme-win95 .exp-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #555555;
  font-weight: bold;
}
.exp-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
body.theme-win95 .exp-meta {
  color: #555555;
}

.tech-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tech-stack-pills span {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255, 113, 206, 0.1);
  border: 1px solid var(--win-border-inner);
  color: var(--text-main);
  padding: 2px 6px;
  border-radius: 2px;
}
body.theme-win95 .tech-stack-pills span {
  background: #f0f0f0;
  border: 1px solid #808080;
  color: #000;
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullet-list li {
  font-size: 12px;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.bullet-list li::before {
  content: "»";
  position: absolute;
  left: 0;
  color: var(--win-border);
}
body.theme-win95 .bullet-list li::before {
  color: #000080;
}

/* TERMINAL WINDOW */
.window-content.terminal {
  background-color: var(--term-bg);
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.terminal-history {
  flex-grow: 1;
  margin-bottom: 10px;
  overflow-y: auto;
}
.term-highlight {
  color: var(--term-accent);
  font-weight: bold;
}
.terminal-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  padding: 4px 0;
  border-top: 1px dashed rgba(255,255,255,0.15);
}
.term-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--term-text);
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 2px;
}
.term-action-btn:hover {
  background: var(--term-text);
  color: var(--term-bg);
}
.terminal-input-line {
  display: flex;
  align-items: center;
}
.terminal-prompt {
  color: var(--term-accent);
  margin-right: 6px;
  white-space: nowrap;
}
#terminal-input {
  background: transparent;
  border: none;
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: 12px;
  flex-grow: 1;
  outline: none;
}

/* PROJECTS WINDOW */
.projects-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.retro-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--win-border-inner);
  border-radius: 3px;
  padding: 12px;
  transition: all 0.2s;
}
.retro-card:hover {
  border-color: var(--win-border);
  box-shadow: 0 0 8px rgba(255, 113, 206, 0.3);
}
body.theme-win95 .retro-card {
  background: #ffffff;
  border: 1.5px solid #808080;
  box-shadow: none;
}
body.theme-win95 .retro-card:hover {
  border-color: #000;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.card-header h3 {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  flex-grow: 1;
  margin-left: 6px;
}
body.theme-win95 .card-header h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: bold;
}
.card-icon {
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.devsecops-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff71ce' stroke-width='2.5'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
}
.infra-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301cdfe' stroke-width='2.5'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
}
.card-link {
  color: var(--text-accent);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 0 4px;
}
.card-link:hover {
  text-decoration: underline;
}
.card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.card-stack span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}
.card-stack span:not(:last-child)::after {
  content: " •";
  margin-left: 4px;
}
.card-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-main);
}
body.theme-win95 .card-desc {
  color: #333;
}

/* EDUCATION WINDOW */
.section-title-retro {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--win-border);
  margin-bottom: 8px;
}
body.theme-win95 .section-title-retro {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #000080;
  font-weight: bold;
}
.table-container {
  width: 100%;
  overflow-x: auto;
}
.retro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.retro-table th, .retro-table td {
  border: 1px solid var(--win-border-inner);
  padding: 6px 10px;
  text-align: left;
}
body.theme-win95 .retro-table th, body.theme-win95 .retro-table td {
  border: 1px solid #808080;
  color: #000;
}
.retro-table th {
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-weight: normal;
  color: var(--text-accent);
}
body.theme-win95 .retro-table th {
  background: #d0d0d0;
  color: #000;
  font-family: var(--font-sans);
  font-weight: bold;
}
.font-pixel {
  font-family: var(--font-pixel);
  font-size: 15px;
}

.cert-item-retro {
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--win-border);
  padding: 6px 10px;
}
body.theme-win95 .cert-item-retro {
  background: #fcfcfc;
  border-left: 3px solid #000080;
}
.cert-title-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.cert-date-retro {
  color: var(--text-accent);
}
body.theme-win95 .cert-date-retro {
  color: #555;
  font-family: var(--font-mono);
  font-size: 11px;
}
.cert-provider {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 4px;
}
body.theme-win95 .cert-provider {
  color: #555555;
}
.cert-details {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
}
body.theme-win95 .cert-details {
  color: #333;
}

/* SYNTH WINDOW */
.synth-display {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid var(--win-border);
  padding: 10px;
  border-radius: 3px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.theme-win95 .synth-display {
  background: #000000;
  border: 1.5px solid #808080;
  color: #00ff00;
}
.synth-now-playing {
  color: var(--win-border);
  font-size: 14px;
  letter-spacing: 0.08em;
}
body.theme-win95 .synth-now-playing {
  color: #ffffff;
}
.synth-wave-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 25px;
}
.synth-wave-visualizer .bar {
  flex-grow: 1;
  height: 2px;
  background: var(--text-accent);
  transition: height 0.05s ease;
}
.synth-status-text {
  font-size: 14px;
  color: var(--text-dim);
}
.synth-controls {
  margin: 12px 0;
}
.synth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}
.slider-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.retro-slider {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--win-border-inner);
  height: 6px;
  outline: none;
  width: 80px;
}
.retro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--win-border);
  width: 12px;
  height: 12px;
  cursor: pointer;
  border-radius: 2px;
}
body.theme-win95 .retro-slider {
  background: #ffffff;
  border: 1px solid #808080;
}
body.theme-win95 .retro-slider::-webkit-slider-thumb {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.synth-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Synthesizer Keyboard UI */
.synth-keyboard {
  display: flex;
  position: relative;
  height: 100px;
  background: #000;
  border: 2px solid var(--win-border-inner);
  border-radius: 2px;
}
.key {
  position: relative;
  cursor: pointer;
}
.key.white {
  width: calc(100% / 8);
  height: 100%;
  background: #fff;
  border-right: 1px solid #000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  transition: background 0.1s;
}
.key.white span {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: #888;
}
.key.white:active, .key.white.active {
  background: var(--text-accent);
}
.key.white:active span, .key.white.active span {
  color: #fff;
}
.key.black {
  position: absolute;
  width: calc((100% / 8) * 0.6);
  height: 60%;
  background: #000;
  z-index: 2;
  transition: background 0.1s;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.key.black:active, .key.black.active {
  background: var(--win-border);
}

/* ==========================================================================
   TASKBAR & START MENU
   ========================================================================== */
#taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(13, 2, 28, 0.98);
  border-top: 3px solid var(--win-border);
  z-index: 10000;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 -4px 15px rgba(255, 113, 206, 0.45), 0 -2px 6px rgba(1, 205, 254, 0.25);
  gap: 10px;
}

body.theme-win95 #taskbar {
  background-color: var(--taskbar-bg);
  border-top: 3px solid #ffffff;
  box-shadow: none;
}

/* Start Button container and menu placement */
.start-btn-container {
  position: relative;
}

.start-btn {
  background: var(--start-btn-bg);
  border: 1.5px solid var(--win-border);
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 18px;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s;
  text-shadow: 0 0 5px #fff, 0 0 10px var(--win-border);
  box-shadow: 0 0 12px var(--win-border), inset 0 0 4px var(--win-border);
  animation: pulse-start 1.8s infinite alternate;
}

@keyframes pulse-start {
  from {
    box-shadow: 0 0 8px rgba(255, 113, 206, 0.5), inset 0 0 3px rgba(255, 113, 206, 0.3);
  }
  to {
    box-shadow: 0 0 18px rgba(255, 113, 206, 0.9), inset 0 0 6px rgba(255, 113, 206, 0.5);
  }
}

.start-btn:active, .start-btn.active {
  transform: scale(0.96);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
  animation: none;
}

body.theme-win95 .start-btn {
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 12px;
  border-top: 1.5px solid #ffffff;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #808080;
  border-right: 1.5px solid #808080;
  border-radius: 0;
  box-shadow: none;
  padding: 3px 6px;
}

body.theme-win95 .start-btn.active {
  border-top: 1.5px solid #808080;
  border-left: 1.5px solid #808080;
  border-bottom: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
  padding-top: 4px;
  padding-left: 7px;
}

.start-logo {
  font-size: 13px;
}

/* Start Menu Popup */
.start-menu {
  position: absolute;
  bottom: 34px;
  left: 0;
  width: 200px;
  background-color: var(--win-bg);
  border: 2px solid var(--win-border);
  box-shadow: var(--shadow-neon);
  z-index: 10001;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.start-menu.hidden {
  display: none;
}

body.theme-win95 .start-menu {
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #000000;
  border-right-color: #000000;
  border-radius: 0;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.start-menu-sidebar {
  width: 32px;
  background: var(--win-header-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}
.start-sidebar-text {
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.05em;
  text-shadow: 1px 1px #000;
}

.start-menu-links {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: rgba(10, 3, 20, 0.9);
}

body.theme-win95 .start-menu-links {
  background: #c0c0c0;
}

.start-menu-category {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--win-border-inner);
  padding: 4px 6px;
  letter-spacing: 0.05em;
}
body.theme-win95 .start-menu-category {
  font-family: var(--font-mono);
  color: #000080;
  font-weight: bold;
}

.start-item {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.start-item:hover {
  background: rgba(255, 113, 206, 0.2);
  color: var(--win-border);
}

body.theme-win95 .start-item {
  font-family: var(--font-sans);
  color: #000;
}

body.theme-win95 .start-item:hover {
  background: #000080;
  color: #fff;
}

.start-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}
body.theme-win95 .start-menu-divider {
  background: #808080;
}

/* Open Windows List in Taskbar */
.taskbar-tabs {
  display: flex;
  flex-grow: 1;
  gap: 6px;
  height: 100%;
  align-items: center;
  overflow-x: auto;
}
.taskbar-tabs::-webkit-scrollbar {
  display: none; /* Hide horizontal scrollbar in taskbar */
}

.task-tab {
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid var(--win-border-inner);
  color: var(--text-dim);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 2.5px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease-in-out;
}

.task-tab:hover {
  background: rgba(1, 205, 254, 0.15);
  border-color: var(--text-accent);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(1, 205, 254, 0.4);
}

.task-tab.active {
  background: rgba(255, 113, 206, 0.22);
  color: #ffffff;
  border-color: var(--win-border);
  box-shadow: 0 0 10px rgba(255, 113, 206, 0.6);
  text-shadow: 0 0 5px var(--win-border);
  font-weight: bold;
}

body.theme-win95 .task-tab {
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-bottom: 1.5px solid #808080;
  border-right: 1.5px solid #808080;
  color: #000;
  font-family: var(--font-sans);
  border-radius: 0;
  max-width: 140px;
  padding: 2px 6px;
}

body.theme-win95 .task-tab.active {
  background: #e0e0e0;
  border-top: 1.5px solid #808080;
  border-left: 1.5px solid #808080;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  font-weight: bold;
}

/* System Tray (Clock, Theme, CRT button) */
.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--win-border-inner);
  padding-left: 10px;
}
body.theme-win95 .taskbar-tray {
  border-left: 2px solid #808080;
  padding-left: 6px;
}

.theme-selector-container {
  display: flex;
  align-items: center;
}

.retro-dropdown {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--win-border-inner);
  color: var(--win-border);
  font-family: var(--font-pixel);
  font-size: 14px;
  outline: none;
  padding: 2px 4px;
  cursor: pointer;
}
.retro-dropdown option {
  background: var(--bg-desktop);
  color: var(--win-border);
}

body.theme-win95 .retro-dropdown {
  background: #ffffff;
  border: 1.5px solid #808080;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 11px;
}
body.theme-win95 .retro-dropdown option {
  background: #ffffff;
  color: #000000;
}

/* Tray Buttons */
.tray-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-pixel);
  font-size: 13px;
  padding: 2px 6px;
}

.tray-icon-btn:hover {
  color: #fff;
}

.tray-icon-btn.active {
  color: var(--win-border);
  border: 1px solid var(--win-border-inner);
  background: rgba(255, 113, 206, 0.1);
}

body.theme-win95 .tray-icon-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #000;
}
body.theme-win95 .tray-icon-btn.active {
  border: 1px solid #808080;
  background: #d0d0d0;
  color: #000080;
  font-weight: bold;
}

.crt-icon-img {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'><rect x='2' y='3' width='20' height='14' rx='2'/><path d='M12 17v4M8 21h8'/></svg>");
  background-size: contain;
}

.taskbar-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-accent);
  min-width: 75px;
  text-align: right;
  letter-spacing: 0.05em;
}

body.theme-win95 .taskbar-clock {
  font-family: var(--font-sans);
  color: #000;
  border: 1.5px solid #808080;
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  padding: 2px 6px;
  background: #d0d0d0;
}

/* ==========================================================================
   BOOT & SHUTDOWN INTERFACES
   ========================================================================== */
#boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  overflow: hidden;
}

#boot-screen.hidden {
  display: none;
}

.boot-terminal {
  width: 100%;
  max-width: 800px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.boot-text {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #00ff00;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-y: auto;
}

.boot-prompt {
  font-family: var(--font-pixel);
  font-size: 24px;
  color: #ff71ce;
  text-align: center;
  animation: blink-anim 1s step-end infinite;
}

@keyframes blink-anim {
  50% { opacity: 0; }
}

/* Shutdown Animation Screen Effect */
body.shutdown-active {
  animation: screen-shutdown-collapse 1.2s forwards;
}

@keyframes screen-shutdown-collapse {
  0% {
    filter: brightness(1) contrast(1);
  }
  30% {
    filter: brightness(1.5) contrast(1.2);
    transform: scaleY(1);
  }
  60% {
    filter: brightness(3) contrast(1.5);
    transform: scaleY(0.015) scaleX(1);
    background: #ffffff;
  }
  85% {
    filter: brightness(5);
    transform: scaleY(0.015) scaleX(0.005);
    background: #ffffff;
  }
  100% {
    transform: scale(0);
    background: #000000;
    filter: brightness(0);
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN (LANDSCAPE PREFERENCE / MOBILE REDIRECT)
   ========================================================================== */
@media (max-width: 768px) {
  /* On mobile/portrait, windows layout adapts dynamically */
  .desktop-icons {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    width: 100%;
    height: auto;
    position: relative;
    top: 0; left: 0;
    margin-bottom: 20px;
    gap: 10px;
  }
  
  .desktop {
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }

  .window {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 360px !important; /* Set proper standard height on mobile */
    max-height: 75dvh !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    min-height: auto;
    box-shadow: none !important;
  }

  .window:not(.open-window) {
    display: none !important;
  }
  
  .window.minimized {
    display: none !important;
  }
  
  .window-header {
    cursor: default;
  }

  .window-controls .win-min, .window-controls .win-max {
    display: none; /* Hide minimize/maximize on mobile decks */
  }

  .exp-details {
    height: auto !important;
  }

  .taskbar-tabs {
    display: none !important; /* Hide tabs on mobile since we only open one window at a time */
  }

  .boot-prompt {
    font-size: 18px !important;
  }

  .start-btn {
    font-size: 14px !important;
    padding: 3px 8px !important;
  }

  #taskbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    z-index: 10000 !important;
    padding: 0 5px;
    gap: 5px;
  }

  .taskbar-clock {
    display: none; /* Make space for controls */
  }
  
  .theme-selector-container {
    display: flex !important; /* Show dropdowns on mobile */
  }

  .retro-dropdown {
    font-size: 11px !important;
    max-width: 80px !important;
    padding: 1px 2px !important;
  }

  .tray-icon-btn {
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
}

/* Orientation nudge */
@media (max-height: 450px) and (orientation: landscape) {
  /* Fits nicely when layout fits exactly in short widescreen */
  .desktop-icons {
    grid-template-columns: 1fr;
    grid-auto-rows: 60px;
    gap: 8px;
  }
  .icon-image {
    width: 24px;
    height: 24px;
  }
  .icon-label {
    font-size: 11px;
  }
}