/* Win7 Calendar Popup Styles */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 210px;
  margin: 0 auto 0 auto;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  padding: 4px 0 4px 0;
}

.calendar-day {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #222;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  background: none;
}

.calendar-day.today {
  background: linear-gradient(180deg, #7ec3f7 0%, #eaf6ff 100%);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px 0 rgba(30, 60, 120, 0.13);
}

.calendar-day:hover {
  background: #b5d6f7;
  color: #fff;
}

.games-explorer-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.game-tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, #eaf6ff 0%, #e3e9f7 100%);
  border-right: 1.5px solid #b5c9e7;
  padding: 18px 8px 18px 12px;
  min-width: 120px;
  align-items: flex-start;
}

.game-tab-vertical {
  padding: 10px 8px 8px 8px;
  cursor: pointer;
  font-size: 15px;
  border: 1px solid #bbb;
  background: #f0f0f0;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  margin-bottom: 0;
  gap: 4px;
}

.game-tab-vertical.active {
  background: #0078d4;
  color: #fff;
  border-color: #005a9e;
  position: relative;
  z-index: 1;
}

.games-main-area {
  flex: 1;
  padding: 18px 0 18px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  min-height: 0;
}

.terminal-window {
  background: #001740;
  color: #e0ffe0;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.22);
  border: 1.5px solid #222;
  padding: 0;
  overflow: hidden;
}

.terminal-header {
  background: linear-gradient(90deg, #222 60%, #444 100%);
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-body {
  padding: 16px 18px 12px 18px;
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #001740;
}

.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  background: #001740;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border-bottom: 1.5px solid #444;
  min-height: 28px;
}

.terminal-prompt {
  color: #7fff7f;
  font-weight: bold;
  font-family: inherit;
}

.terminal-input {
  background: transparent !important;
  color: #00ff41;
  border: none !important;
  outline: none !important;
  font-family: inherit;
  font-size: 15px;
  padding: 0 0 1px 0;
  border-radius: 0;
  width: 100%;
  box-shadow: none !important;
  min-height: 24px;
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 18px;
  background: #fff;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: bottom;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.tray-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tray-icon-wrap .tray-tooltip {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  transition: opacity 0.15s, transform 0.15s cubic-bezier(.4, 1.6, .6, 1);
  left: 50%;
  bottom: 120%;
  position: absolute;
  z-index: 1000;
}

.tray-icon-wrap:hover .tray-tooltip,
.tray-icon-wrap:focus-within .tray-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px) scale(1);
}

/* ================================================================
   WIN7 SLIDER STYLES (Volume, Settings, etc)
   ================================================================ */
/* ================================================================
   WIN7 VERTICAL SLIDER STYLE (Tray popup only)
   ================================================================ */
input[type="range"].vertical {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 28px;
  height: 120px;
  background: transparent;
  margin: 0;
  padding: 0;
}

input[type="range"].vertical::-webkit-slider-runnable-track {
  height: 110px;
  width: 8px;
  background: linear-gradient(180deg, #eaf6ff 0%, #b5d6f7 100%);
  border-radius: 5px;
  border: 1.5px solid #7ec3f7;
  box-shadow: 0 1px 2px #b0d7ff inset;
}

input[type="range"].vertical::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 8px;
  border-radius: 3px;
  background: #0078d4;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px #0003;
  cursor: pointer;
  margin-left: -2px;
  transition: background 0.15s;
}

input[type="range"].vertical:active::-webkit-slider-thumb {
  background: #005a9e;
}

input[type="range"].vertical::-moz-range-thumb {
  width: 24px;
  height: 8px;
  border-radius: 3px;
  background: #0078d4;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px #0003;
  cursor: pointer;
  transition: background 0.15s;
}

input[type="range"].vertical:active::-moz-range-thumb {
  background: #005a9e;
}

input[type="range"].vertical::-ms-thumb {
  width: 24px;
  height: 8px;
  border-radius: 3px;
  background: #0078d4;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px #0003;
  cursor: pointer;
  transition: background 0.15s;
}

input[type="range"].vertical:active::-ms-thumb {
  background: #005a9e;
}

input[type="range"].vertical::-webkit-slider-thumb {
  margin-left: -5px;
}

input[type="range"].vertical::-moz-focus-outer {
  border: 0;
}


/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
  background: #000;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ================================================================
   BIOS SCREEN — real BIOS VGA bitmap font look
   ================================================================ */
@font-face {
  font-family: 'Perfect DOS VGA 437';
  src: url('../assets/fonts/Perfect%20DOS%20VGA%20437.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Perfect DOS VGA 437 Win';
  src: url('../assets/fonts/Perfect%20DOS%20VGA%20437%20Win.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM VGA 8x16';
  src: url('../assets/fonts/Perfect%20DOS%20VGA%20437%20Win.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.bios-screen {
  background: #0000AA;
  color: #AAAAAA;
  font-family: 'IBM VGA 8x16', 'Perfect DOS VGA 437 Win', 'Perfect DOS VGA 437', 'Fixedsys', 'Terminal', monospace;
  font-size: clamp(12px, 1.1vw + 6px, 26px);
  line-height: 1.12;
  padding: 0;
  letter-spacing: 0;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: optimizeSpeed;
  overflow: hidden;
  text-size-adjust: 100%;
}

.bios-lines {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: clamp(6px, 1.2vw, 16px);
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.bios-lines::-webkit-scrollbar {
  display: none;
}

.bios-lines p {
  margin: 0;
  min-height: 1.12em;
  line-height: 1.12;
  white-space: pre;
}

/* White — title bars, important labels */
.bios-lines p.bios-header {
  color: #FFFFFF;
  font-weight: normal;
}

/* Bright green — OK / passed */
.bios-lines p.bios-ok {
  color: #55FF55;
}

/* Bright yellow — detecting / scanning */
.bios-lines p.bios-warn {
  color: #FFFF55;
}

/* Cyan — box drawing, decorative */
.bios-lines p.bios-bar {
  color: #55FFFF;
  letter-spacing: 0;
}

/* Bright white on blue highlight (like selected BIOS menu) */
.bios-lines p.bios-highlight {
  color: #000;
  background: #AAAAAA;
  display: inline-block;
}

/* Red — error text */
.bios-lines p.bios-error {
  color: #FF5555;
}

/* ================================================================
   BOOT / LOADING SCREEN — exact clone of Eshwar's LoadingScreen
   Black bg, centered video, "Starting Portfolio" text
   ================================================================ */
.boot-screen {
  background: #000;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
}

.boot-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.boot-text {
  margin-top: 12px;
  text-align: center;
}

.boot-bottom {
  width: 100%;
  padding-bottom: 32px;
  text-align: center;
}

.boot-hint {
  font-size: 12px;
  color: #c9d5e2;
  margin: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.fade-in {
  animation: fadeIn 1.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ================================================================
   LOGIN SCREEN — exact clone of Eshwar's LoginScreen
   windows-bg.jpg background, glass avatar, name, branding, shutdown
   ================================================================ */
.login-screen {
  background-image: url('../assets/images/windows-7-home.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.login-avatar-hint {
  color: #1a237e;
  font-size: 16px;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-shadow: 0 1px 2px #fff, 0 0px 2px #b0c4de;
  text-align: center;
}

/* Glass avatar frame — exact from LoginScreen.module.css .glassImage */
.login-avatar-glass {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.4),
    inset 1px 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
  cursor: pointer;
}

.login-avatar-glass:hover {
  box-shadow: none;
}

.login-name {
  color: #fff;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.02em;
  margin-top: 12px;
  margin-bottom: 4px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
}

.login-subtitle {
  color: #fff;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.015em;
  text-align: center;
  margin-top: 0;
  max-width: 680px;
  padding: 0 18px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.48);
  opacity: 0.96;
}

.login-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 16px 16px;
}

.login-branding {
  display: flex;
  align-items: center;
}

.login-win-logo {
  height: 40px;
  width: 55px;
  object-fit: contain;
}

/* Exact from LoginScreen.module.css .titleFont */
.login-brand-name {
  font-family: 'Segoe UI';
  font-size: 34px;
  text-shadow: 2px 2px 4px #1a1919;
  color: #fff;
}

/* Exact from LoginScreen.module.css .registedFont */
.login-registered {
  font-size: 20px;
  text-shadow: 2px 2px 4px #1a1919;
  color: #fff;
}

.login-shutdown-wrap {
  position: relative;
}

.login-shutdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  transition: opacity 0.2s;
  padding: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.13);
  padding: 0;
}

.login-shutdown-btn:hover {
  opacity: 0.8;
}

.login-shutdown-btn img {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.shutdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: #fff;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: 128px;
  z-index: 50;
}

.shutdown-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.2s, background 0.2s;
  min-width: 100px;
  min-height: 110px;
  user-select: none;
  font-size: 13px;
  cursor: pointer;
}

.shutdown-menu-item:hover {
  background: #3b82f6;
  color: #fff;
}

.shutdown-menu-item+.shutdown-menu-item {
  border-top: 1px solid #d1d5db;
}

/* ================================================================
   DESKTOP (HOME SCREEN) — exact clone of Eshwar's HomeScreen
   windows-7-home.jpg background
   ================================================================ */
.desktop-screen {
  background-image: url('../assets/images/windows-7-home.jpg');
  background-size: cover;
  background-position: center;
  display: block;
}

/* Desktop Icons — absolute top-4 left-4 flex-col gap-4
   EXACT from Eshwar: "absolute top-4 left-4 flex flex-col gap-4 select-none" */
.desktop-icons {
  position: absolute;
  top: 16px;
  /* top-4 = 1rem = 16px */
  left: 16px;
  /* left-4 */
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, auto);
  gap: 18px;
  user-select: none;
  z-index: 1;
  height: 440px;
  max-width: none;
  overflow: visible;
}

/* Desktop icon — exact from Eshwar:
   "group flex flex-col items-center cursor-pointer w-25 h-25" */
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 100px;
  /* w-25 = 6.25rem ≈ 100px */
  height: 100px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

/* Hover — exact from HomeScreen.module.css .desktopIcon:hover */
.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Selected state — same glass but slightly stronger */
.desktop-icon.selected {
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.icon-img {
  width: 40px;
  height: 40px;
  image-rendering: auto;
}

.icon-label {
  color: #fff;
  font-size: 14px;
  /* text-sm */
  text-align: center;
  margin-top: 4px;
  padding: 0 4px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* ================================================================
   WELCOME DIALOG — exact from Eshwar's LoaderDialog
   Centered, 40vw, 7.css window
   ================================================================ */
.welcome-dialog {
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 40vw;
  min-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.welcome-profile-panel {
  border: 1px solid #a8c4da;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(236,244,252,0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.welcome-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #c9dceb;
  background: linear-gradient(180deg, rgba(250,253,255,0.95) 0%, rgba(225,238,249,0.9) 100%);
}

.welcome-profile-name {
  font-size: 14px;
  font-weight: 700;
  color: #17324a;
}

.welcome-profile-alias {
  margin-top: 2px;
  font-size: 11px;
  color: #4c6478;
}

.welcome-profile-role {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #21496b;
}

.welcome-profile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.welcome-profile-btn,
.welcome-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #9db7cf;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff 0%, #e2eef8 100%);
  color: #14456d;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  cursor: pointer;
}

.welcome-profile-btn:hover,
.welcome-profile-link:hover {
  border-color: #6f9ec5;
  background: linear-gradient(180deg, #ffffff 0%, #d3e7f7 100%);
}

.welcome-profile-body {
  padding: 10px 12px 12px;
  font-size: 11px;
  color: #243444;
}

.welcome-profile-line {
  margin-bottom: 4px;
  line-height: 1.45;
}

.welcome-profile-line a {
  color: #0b5ea8;
  text-decoration: none;
}

.welcome-profile-line a:hover {
  text-decoration: underline;
}

.welcome-profile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.desktop-widget {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 290px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 168, 208, 0.75);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(226,239,249,0.86) 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  z-index: 3;
}

.desktop-widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.desktop-widget-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.desktop-widget-title {
  font-size: 13px;
  font-weight: 700;
  color: #17324d;
}

.desktop-widget-subtitle {
  margin-top: 1px;
  font-size: 11px;
  color: #5d7388;
}

.desktop-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.desktop-widget-stat {
  padding: 8px 10px;
  border: 1px solid rgba(189, 213, 232, 0.9);
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  color: #17324d;
}

.desktop-widget-stat-label {
  display: block;
  font-size: 10px;
  color: #6c8094;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.desktop-widget-body {
  font-size: 11px;
  line-height: 1.55;
  color: #2a3d52;
}

.desktop-widget-line + .desktop-widget-line {
  margin-top: 6px;
}

.desktop-widget-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

/* ================================================================
   FLOATING WINDOWS — uses 7.css .window .active
   Exact shadow from Eshwar's Explorer: boxShadow: '0 8px 24px rgba(0,0,0,0.35)'
   ================================================================ */
#windows-container .window {
  position: absolute;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 2 * 1.5px border = 3px, so subtract 3px from 100vh - 41px */
  max-height: calc(100vh - 41px - 3px) !important;
  height: auto;
}

#windows-container .window .title-bar {
  cursor: move;
  user-select: none;
}

/* Window controls — using stock 7.css (same as Eshwar's repo, no overrides) */

#windows-container .window .window-body {
  overflow: auto;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

#windows-container .window .title-bar,
#windows-container .window .status-bar {
  flex: 0 0 auto;
}

/* Resize handle — exact from Eshwar's Explorer */
.resize-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  right: 4px;
  bottom: 4px;
  cursor: se-resize;
  background: transparent;
}

/* ================================================================
   TASKBAR — exact from Eshwar's TaskBar.tsx
   "fixed bottom-0 left-0 right-0 h-10
    bg-gradient-to-b from-[#5fa5d7] to-[#276c9a]
    shadow-[0_-2px_6px_rgba(0,0,0,0.4)]
    border-t border-[#0f4f73]
    flex items-center select-none"
   ================================================================ */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: 
    linear-gradient(180deg, 
      rgba(255, 255, 255, 0.28) 0%, 
      rgba(255, 255, 255, 0.15) 1px,
      rgba(171, 214, 241, 0.88) 2px,
      rgba(109, 173, 219, 0.82) 48%, 
      rgba(46, 109, 165, 0.90) 52%,
      rgba(24, 77, 126, 0.94) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 
    0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  user-select: none;
  z-index: 9999;
}

/* Start button area — "h-full flex items-center px-3" */
.taskbar-start {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  /* px-3 */
}

.start-orb {
  height: 40px;
  width: 40px;
  cursor: pointer;
}

/* Running programs — "flex-1 h-full flex items-center gap-2 px-2 overflow-x-auto" */
.taskbar-programs {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  /* gap-1 from Eshwar */
  padding: 0 8px;
  overflow-x: auto;
}

/* Taskbar program button — exact from TaskBar.module.css .desktopIcon */
.taskbar-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 32px;
  padding: 4px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.12));
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-bottom-color: rgba(16, 70, 116, 0.8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(45, 98, 145, 0.25) inset;
}

.taskbar-btn img {
  width: 23px;
  height: 25px;
}

.taskbar-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(209, 236, 255, 0.2));
  border-color: rgba(204, 235, 255, 0.95);
}

.taskbar-btn.active {
  background: linear-gradient(180deg, rgba(238, 249, 255, 0.64), rgba(175, 222, 252, 0.38));
  border-color: rgba(214, 240, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 0 0 1px rgba(53, 139, 198, 0.42) inset,
    0 0 8px rgba(110, 196, 250, 0.35);
}

/* System tray — "flex items-center gap-4 text-white px-4 text-sm" */
.system-tray {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  padding: 0 16px;
  font-size: 14px;
  position: relative;
  min-width: 260px;
  height: 100%;
  background: none;
}

.tray-icons-area {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

.tray-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12));
  margin: 0 10px;
  border-radius: 1px;
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.18);
}

.tray-icon {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 2px 2px rgba(40, 40, 40, 0.22));
  opacity: 1;
  transition: filter 0.15s, opacity 0.15s;
  margin: 0 2px;
}

.tray-icon:hover {
  filter: drop-shadow(0 4px 8px rgba(30, 144, 255, 0.18)) drop-shadow(0 2px 2px rgba(40, 40, 40, 0.22));
  opacity: 1;
}

.tray-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 54px;
  padding: 0 6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  line-height: 1.1;
  border-radius: 6px;
  transition: box-shadow 0.18s, background 0.18s;
  cursor: pointer;
  position: relative;
}

.tray-clock:hover {
  background: linear-gradient(90deg, rgba(120, 180, 255, 0.18), rgba(120, 180, 255, 0.32));
  box-shadow: 0 0 12px 2px rgba(80, 160, 255, 0.18);
}

.tray-time {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.tray-date {
  font-size: 11px;
  font-weight: 400;
  color: #e0e8f0;
  opacity: 0.85;
  margin-top: 1px;
}

.tray-tooltip {
  position: absolute;
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%) translateY(10px);
  min-width: 90px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(7px) saturate(1.2);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 7px;
  box-shadow: 0 6px 24px 0 rgba(30, 60, 120, 0.22);
  padding: 7px 16px;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.15s, transform 0.15s;
}

.tray-icon:hover+.tray-tooltip,
.tray-icon:focus+.tray-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.tray-clock {
  text-align: right;
  line-height: 1;
}

.tray-time {
  font-size: 13px;
}

.tray-date {
  font-size: 11px;
  margin-top: 2px;
}

/* ================================================================
   START MENU — exact from Eshwar's TaskBar.tsx start menu
   "absolute bottom-10 left-0 w-[340px] h-[400px]
    bg-gradient-to-b from-[#fdfdfd] to-[#dbe8f3]
    rounded-xl shadow-2xl border border-[#a8c2d6]
    flex overflow-hidden"
   ================================================================ */
.start-menu {
  position: absolute;
  bottom: 40px;
  /* bottom-10 = 2.5rem = bottom of taskbar */
  left: 0;
  width: 340px;
  height: 400px;
  background: linear-gradient(180deg, #fdfdfd, #dbe8f3);
  border-radius: 12px;
  /* rounded-xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* shadow-2xl */
  border: 1px solid #a8c2d6;
  display: flex;
  overflow: hidden;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}

/* Left section — "w-[55%] bg-white/70 px-3 py-2 flex flex-col" */
.start-menu-left {
  width: 55%;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.start-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.start-menu-item:hover {
  background: #dbeafe;
  /* hover:bg-blue-100 */
}

.start-menu-item img {
  width: 22px;
  height: 22px;
}

.start-menu-item span {
  font-size: 14px;
  /* text-sm */
  color: #1f2937;
  /* text-gray-800 */
}

/* Right section — exact from Eshwar:
   "w-[45%] bg-gradient-to-b from-[#5fa5d7] to-[#276c9a]
    shadow-[0_-2px_6px_rgba(0,0,0,0.4)]
    border-t border-[#0f4f73]
    px-4 py-4 text-sm text-white border-l border-white/40
    flex flex-col" */
.start-menu-right {
  width: 45%;
  background: linear-gradient(180deg, #5fa5d7, #276c9a);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.4);
  border-top: 1px solid #0f4f73;
  padding: 16px;
  font-size: 14px;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
}

.start-right-item {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 4px;
}

.start-right-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.start-right-spacer {
  flex: 1;
}

.start-shutdown-btn {
  width: 100%;
  margin-top: auto;
}

/* ================================================================
   CONTEXT MENU — Windows 7 Style
   ================================================================ */
.context-menu {
  position: fixed;
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f4 100%);
  border: 1px solid #868686;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  border-radius: 3px;
  padding: 2px 1px;
  min-width: 200px;
  z-index: 10001;
  font-size: 12px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.ctx-item {
  padding: 5px 12px 5px 8px;
  cursor: default;
  border-radius: 2px;
  margin: 1px 2px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctx-item:hover {
  background: linear-gradient(180deg, #dceeff 0%, #c0dcf3 100%);
  border: 1px solid #7eb4ea;
  margin: 0 1px;
  padding: 4px 11px 4px 7px;
  color: #000;
}

.ctx-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.ctx-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 28px, #d0d0d0 28px, #d0d0d0 calc(100% - 8px), transparent calc(100% - 8px));
  margin: 3px 0;
}

/* ================================================================
   APP WINDOW CONTENT STYLES
   ================================================================ */

/* About Me — Explorer style from Eshwar's AboutMe.tsx/module.css */
.about-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #f0f0f0, #e8e8e8);
  border-bottom: 1px solid #c0c0c0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.about-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 4px;
  cursor: default;
}

.about-nav-btn:not([disabled]):hover {
  background: #e0e8f0;
  border-color: #bbb;
  cursor: pointer;
}

.about-address-bar {
  flex: 1;
  height: 28px;
  background: #fff;
  border: 1px solid #a0a0a0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 13px;
  color: #333;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  position: relative;
}

.about-search-bar {
  width: 180px;
  height: 28px;
  background: #fff;
  border: 1px solid #a0a0a0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 2px;
}

.about-search-bar input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 12px;
  outline: none;
}

.about-command-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: linear-gradient(180deg, #fdfdfd, #f0f0f0);
  border-bottom: 1px solid #c0c0c0;
}

.command-item {
  font-size: 12px;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.command-item:hover {
  color: #0078d4;
}

.about-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #fff;
  min-height: 0;
  height: calc(100% - 80px);
  box-sizing: border-box;
}

.about-sidebar {
  width: 220px;
  background: linear-gradient(90deg, #f5faff, #eaf3ff);
  border-right: 1px solid #b5c9e7;
  padding: 10px 4px;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Sidebar — Navigation Pane Style */
.sidebar-group {
  margin-bottom: 12px;
}

.sidebar-group-header {
  font-size: 11px;
  font-weight: bold;
  color: #004675;
  padding: 0 12px 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-group-header::before {
  content: "▼";
  font-size: 8px;
  color: #666;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 20px;
  font-size: 13px;
  color: #234;
  cursor: pointer;
  border-radius: 3px;
  margin: 0 4px;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item:hover {
  background: rgba(120, 180, 255, 0.15);
}

.sidebar-item.active {
  background: linear-gradient(90deg, #dceefc, #cee5f9);
  border: 1px solid #b8d6fb;
  font-weight: bold;
  color: #000;
  padding: 3px 11px 3px 19px;
}

/* System Properties View */
.system-view {
  padding: 4px;
}

.system-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10px 0 20px 0;
  border-bottom: 2px solid #003399;
  padding-bottom: 8px;
}

.system-experience-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: linear-gradient(135deg, #f0f7ff, #d0e5ff);
  border: 1px solid #a0c0e0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.system-table {
  width: 100%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.system-label {
  color: #666;
  width: 140px;
  padding-right: 10px;
}

.system-value {
  font-weight: bold;
}

.sidebar-item:hover {
  background: linear-gradient(90deg, #0078d4, #1084e8);
  color: #fff;
  padding-left: 8px;
}

/* Content area — exact from AboutMe.module.css */

/* About Me main content area — Explorer style, correct padding and sizing */

@media (max-width: 900px),
(max-height: 600px) {
  .about-content {
    overflow-y: auto;
    max-height: 100%;
  }
}

/* removed stray properties, not a valid selector */

.about-content {
  flex: 1;
  padding: 8px 8px 0 8px;
  overflow-y: auto;
  background: #f5f5f5;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

.about-section-content {
  padding: 12px 14px 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #1a237e;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-weight: 500;
  text-shadow: 0 1px 2px #e3e9f7, 0 0px 2px #b0c4de;
  background: #f5f5f5;
  transition: max-height 0.25s cubic-bezier(.4, 1.6, .6, 1), padding 0.2s;
  overflow: hidden;
}

.about-section-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: linear-gradient(135deg, #e8e8f5, #d8d8e8);
  border: 1px solid #c0c0d0;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: #0078d4;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.about-section-header:hover {
  background: linear-gradient(135deg, #f0f0ff, #e0e0f0);
  border-color: #0078d4;
}

/* Experience cards — exact from Eshwar */
.experience-card {
  padding: 8px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
  border: 1px solid;
  border-color: #d5d5d5 #808080 #808080 #d5d5d5;
  border-left: 4px solid #0078d4;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.experience-card:hover {
  background: linear-gradient(135deg, #fff, #f5f5f5);
  border-left-color: #1084e8;
}

.exp-duration {
  font-size: 10px;
  font-weight: bold;
  color: #0078d4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.exp-title {
  font-size: 11px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.exp-desc {
  font-size: 10px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Skill/Tech badges — Square Windows 7 Style */
.tech-badge, .skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 45%, #e1e1e1 55%, #f5f5f5 100%);
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 #fff;
  margin: 4px;
  transition: all 0.15s;
  cursor: default;
}

.tech-badge:hover, .skill-badge:hover {
  background: linear-gradient(180deg, #fafafa 0%, #eaf3ff 45%, #dcebfc 55%, #eaf3ff 100%);
  border-color: #7ba2ce;
  box-shadow: 0 0 5px rgba(120, 170, 220, 0.5), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

/* Skill bar items (for Skills window) */
.skill-item {
  margin-bottom: 10px;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}

.skill-icon {
  width: 14px;
  height: 14px;
  image-rendering: auto;
  vertical-align: middle;
}

.skill-bar-outer {
  height: 14px;
  background: #e0e0e0;
  border: 1px solid #bbb;
  border-radius: 2px;
  overflow: hidden;
}

.skill-bar-inner {
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #a4e672 0%, #5cb85c 60%, #388e3c 100%);
  box-shadow: 0 1px 2px #b6ffb6 inset, 0 2px 6px #388e3c33 inset;
  border-radius: 2px;
  position: relative;
  transition: width 0.8s cubic-bezier(.4, 1.6, .6, 1);
  overflow: hidden;
}

.skill-bar-inner::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
}

/* Project cards — compact Win7 style */
.projects-list {
  padding: 4px;
}

.project-card {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
  border: 1px solid;
  border-color: #d5d5d5 #808080 #808080 #d5d5d5;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background 0.15s, border-left-color 0.15s;
}

.project-card:hover {
  background: rgba(180, 220, 255, 0.35);
  box-shadow: 0 0 0 2px #6ba4e7, 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.project-card.project-featured {
  border-left: 3px solid #0078d4;
}

.project-card.project-featured:hover {
  border-left-color: #1084e8;
}

.project-card.active {
  background: linear-gradient(180deg, #f7fbff, #e5f1ff);
  border-color: #9dbce0 #6d98c6 #6d98c6 #9dbce0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 1px rgba(68, 137, 213, 0.35);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.project-header h4 {
  font-size: 12px;
  color: #0078d4;
  margin: 0;
}

.project-links {
  display: flex;
  gap: 8px;
  font-size: 11px;
  flex-shrink: 0;
}

.project-badge {
  display: inline-block;
  font-size: 9px;
  background: linear-gradient(180deg, #ffd700, #ffa500);
  color: #333;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 4px;
}

.project-card p {
  font-size: 11px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4px;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tech-tag {
  display: inline-block;
  padding: 2px 6px;
  background: linear-gradient(180deg, #e8f4ff, #d0e8ff);
  border: 1px solid #b0d7ff;
  border-radius: 2px;
  font-size: 10px;
  color: #0078d4;
}

.link-icon {
  width: 14px;
  height: 14px;
  image-rendering: auto;
  vertical-align: middle;
  margin-right: 2px;
}

.explorer-split {
  display: grid;
  grid-template-columns: 270px 1fr;
  height: 100%;
  min-height: 0;
  background: #fff;
}

.explorer-nav-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #cddced;
  background: linear-gradient(180deg, #f8fbff, #eef4fb);
}

.explorer-preview-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #ffffff, #f7fbff 100%);
}

.explorer-pane-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #d8e4f0;
  background: linear-gradient(180deg, #fbfdff, #e8f1fb);
}

.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #2c5277;
  background: linear-gradient(180deg, #ffffff, #edf5ff);
  border: 1px solid #bcd0e5;
  border-radius: 10px;
}

.compact-list {
  padding: 8px;
  overflow: auto;
  min-height: 0;
}

.compact-preview {
  padding: 12px;
  overflow: auto;
  min-height: 0;
}

.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.mini-stat {
  border: 1px solid #d5e1ee;
  background: linear-gradient(180deg, #ffffff, #f3f8fe);
  border-radius: 4px;
  padding: 10px;
  color: #27415e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.mini-stat-label {
  font-size: 11px;
  color: #5a7696;
  margin-bottom: 4px;
}

.mini-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #0b4f8f;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.win7-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #9cb6d5;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff, #dfeeff);
  color: #0d4c8c;
  text-decoration: none;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.win7-action-btn:hover {
  background: linear-gradient(180deg, #ffffff, #cfe5ff);
}

.dense-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dense-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d8e3ef;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.dense-row-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.dense-row-main {
  flex: 1;
  min-width: 0;
}

.dense-row-title {
  font-size: 12px;
  font-weight: 700;
  color: #17324d;
  margin-bottom: 3px;
}

.dense-row-meta {
  font-size: 11px;
  color: #5b7692;
}

.record-explorer {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 12px;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d0deec;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  text-align: left;
  cursor: pointer;
}

.record-item:hover,
.record-item.active {
  border-color: #7cabd2;
  background: linear-gradient(180deg, #ffffff 0%, #dcebfa 100%);
}

.record-item-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.record-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.record-item-title {
  font-size: 12px;
  font-weight: 700;
  color: #17324d;
}

.record-item-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #5b7692;
}

.record-preview {
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid #cfe0ef;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,247,254,0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.record-preview-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border: 1px solid #c6d9ea;
  border-radius: 999px;
  background: #edf5fc;
  color: #43617d;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.record-preview-title {
  font-size: 18px;
  font-weight: 700;
  color: #174a86;
}

.record-preview-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: #5a7390;
}

.record-preview-lines {
  margin-top: 12px;
  font-size: 12px;
  color: #233548;
  line-height: 1.7;
}

.record-preview-desc {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #d8e6f2;
  font-size: 12px;
  line-height: 1.7;
  color: #32485f;
}

.project-preview-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-preview-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.project-preview-links {
  margin-top: 12px;
}

.project-preview-tech {
  margin-top: 6px;
}

.about-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compact-two-col {
  display: grid;
  grid-template-columns: minmax(240px, 290px) 1fr;
  gap: 12px;
  min-height: 0;
}

@media (max-width: 860px) {
  .explorer-split,
  .compact-two-col,
  .record-explorer {
    grid-template-columns: 1fr;
  }
}

.btn-icon {
  width: 14px;
  height: 14px;
  image-rendering: auto;
  vertical-align: middle;
  margin-right: 3px;
}

/* Message form */
.message-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  font-size: 12px;
  padding: 6px;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.char-count {
  color: #888;
}

/* ================================================================
   TERMINAL
   ================================================================ */
.terminal-body {
  background: #1a1a2e;
  color: #00ff41;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  padding: 8px;
  height: 100%;
  overflow-y: auto;
  line-height: 1.5;
}

.terminal-body::-webkit-scrollbar {
  width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
  background: #111;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.terminal-prompt {
  color: #00ff41;
}

.terminal-input-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.terminal-input {
  background: transparent;
  border: none;
  color: #00ff41;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  flex: 1;
  caret-color: #00ff41;
}

.terminal-output {
  color: #ccc;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Terminal line color classes — used by terminal.js printLine/printHtml */
.terminal-body .line.error,
.terminal-body .error {
  color: #ff6b6b;
}

.terminal-body .line.success,
.terminal-body .success {
  color: #00ff41;
}

.terminal-body .line.info,
.terminal-body .info {
  color: #00ddff;
}

.terminal-body .line.ascii,
.terminal-body .ascii {
  color: #00ddff;
  line-height: 1.2;
}

.terminal-body .line.highlight,
.terminal-body .highlight {
  color: #ffd93d;
}

.terminal-body .line.cyan,
.terminal-body .cyan {
  color: #00ddff;
}

/* ================================================================
   NOTIFICATION
   ================================================================ */
.notification {
  position: fixed;
  bottom: 50px;
  right: 16px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 99999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.success {
  background: #0078d4;
  color: #fff;
}

.notification.error {
  background: #c00;
  color: #fff;
}

.notification.message {
  width: 290px;
  padding: 12px 14px;
  border: 1px solid #6e9ccd;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(251,253,255,0.98), rgba(226,239,252,0.98));
  color: #17324d;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

.message-toast-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #0e4f8a;
}

.message-toast-icon {
  width: 16px;
  height: 16px;
}

.message-toast-name {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.message-toast-body {
  font-size: 11px;
  line-height: 1.45;
  color: #35516e;
}

/* ================================================================
   GAMES
   ================================================================ */
.game-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.game-tab {
  padding: 14px 18px 12px 18px;
  cursor: pointer;
  font-size: 15px;
  border: 1px solid #bbb;
  background: #f0f0f0;
  margin-right: -1px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.game-tab-icon-large {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  display: block;
}

.game-tab-label {
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
}

.game-area {
  display: none;
}

.game-area.active {
  display: block;
}

.game-tab:first-child {
  border-radius: 3px 0 0 3px;
}

.game-tab:last-child {
  border-radius: 0 3px 3px 0;
}

.game-tab:hover {
  background: #e0e0e0;
}

.game-tab.active {
  background: #0078d4;
  color: #fff;
  border-color: #005a9e;
  position: relative;
  z-index: 1;
}

.game-status {
  margin-bottom: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #28445e;
  background: linear-gradient(180deg, #f8fbff, #e7f0fb);
  border: 1px solid #bfd3ea;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.game-board-puzzle {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 30px;
  margin: 8px auto;
  width: fit-content;
}

.puzzle-tile {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(180deg, #e8f4ff, #d0e8ff);
  border: 1px solid #b0d7ff;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.puzzle-tile.empty {
  background: transparent;
  border-color: transparent;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 30px;
  margin: 8px auto;
  width: fit-content;
}

/* Puzzle game 3x3 grid container */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 30px;
  margin: 8px auto;
  width: fit-content;
}

.memory-tile {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(180deg, #0078d4, #005a9e);
  color: #fff;
  border: 1px solid #005a9e;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.memory-tile.flipped,
.memory-tile.matched {
  background: #e8f4ff;
  color: #333;
}

.memory-tile.matched {
  border: 2px solid #0078d4;
}

.memory-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.snake-canvas {
  border: 2px solid #0078d4;
  display: block;
  margin: 8px auto;
}

.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 30px;
  margin: 8px auto;
  width: fit-content;
}

.ttt-cell {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  background: #f0f0f0;
  border: 1px solid #bbb;
  cursor: pointer;
  border-radius: 4px;
}

.ttt-cell:hover {
  background: #e0e0e0;
}

.typing-word {
  font-size: 20px;
  text-align: center;
  padding: 12px;
  background: #f0f0f0;
  border: 1px solid #bbb;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: 'Consolas', monospace;
  letter-spacing: 2px;
}

.typing-input {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  text-align: center;
  font-family: 'Consolas', monospace;
}

.typing-stats {
  display: flex;
  justify-content: space-around;
  font-size: 11px;
  margin-top: 8px;
}

a {
  color: #0078d4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ================================================================
   SCROLLBAR (Win7 style)
   ================================================================ */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-left: 1px solid #bbb;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c0c0c0, #a0a0a0);
  border: 1px solid #808080;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d0d0d0, #b0b0b0);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 600px) {
  .bios-screen {
    font-size: 12px;
    line-height: 1.14;
  }

  .bios-lines {
    padding: 6px;
  }
}

@media (min-width: 1920px) {
  .bios-screen {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .desktop-icons {
    gap: 8px;
  }

  .desktop-icon {
    width: 72px;
    height: 72px;
  }

  .icon-img {
    width: 40px;
    height: 40px;
  }

  .icon-label {
    font-size: 11px;
  }

  .start-menu {
    width: 280px;
    height: 350px;
  }

  .welcome-dialog {
    width: 80vw;
  }

  .welcome-profile-head {
    flex-direction: column;
  }

  .welcome-profile-actions {
    justify-content: flex-start;
  }

  .desktop-widget {
    position: static;
    width: auto;
    margin: 14px 14px 0;
  }
}

body.mobile-mode .desktop-screen {
  overflow: hidden;
}

body.mobile-mode .desktop-icons {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-flow: row;
  grid-auto-columns: unset;
  gap: 12px 8px;
  width: auto;
  height: auto;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 0 0 14px;
}

body.mobile-mode .desktop-icon {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 82px;
  padding: 6px 2px;
}

body.mobile-mode .desktop-icon:hover,
body.mobile-mode .desktop-icon.selected {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.mobile-mode .icon-img {
  width: 34px !important;
  height: 34px !important;
}

body.mobile-mode .icon-label {
  font-size: 10px;
  line-height: 1.2;
}

body.mobile-mode .welcome-dialog {
  left: 10px !important;
  right: 10px;
  top: 10px !important;
  transform: none !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
}

body.mobile-mode .welcome-profile-head {
  flex-direction: column;
  align-items: stretch;
}

body.mobile-mode .welcome-profile-actions {
  justify-content: flex-start;
}

body.mobile-mode #windows-container .window {
  position: fixed;
  left: 8px !important;
  top: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 66px) !important;
  max-height: calc(100vh - 66px) !important;
}

body.mobile-mode #windows-container .window .title-bar {
  cursor: default;
}

body.mobile-mode #windows-container .window.mobile-window .window-body {
  -webkit-overflow-scrolling: touch;
}

body.mobile-mode .resize-handle {
  display: none;
}

body.mobile-mode .taskbar {
  height: 50px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-mode .taskbar-start {
  padding: 0 6px;
}

body.mobile-mode .start-orb {
  width: 36px;
  height: 36px;
}

body.mobile-mode .taskbar-programs {
  gap: 2px;
  padding: 0 4px;
}

body.mobile-mode .taskbar-btn {
  min-width: 40px;
  max-width: 44px;
  padding: 4px 6px;
  font-size: 0;
  justify-content: center;
}

body.mobile-mode .taskbar-btn img {
  width: 20px;
  height: 20px;
  margin: 0;
}

body.mobile-mode .system-tray {
  gap: 6px;
  padding-right: 4px;
}

body.mobile-mode .tray-icons-area {
  gap: 1px;
  margin-right: 2px;
}

body.mobile-mode .tray-hidden-arrow {
  margin-right: 4px;
}

body.mobile-mode .tray-clock {
  margin-right: 6px;
  min-width: 42px;
  font-size: 10px;
}

body.mobile-mode .start-menu {
  left: 8px;
  right: 8px;
  width: auto;
  height: min(68vh, 420px);
}

body.mobile-mode .notification {
  left: 10px;
  right: 10px;
  bottom: 58px;
}

body.mobile-mode .notification.message {
  width: auto;
}

body.mobile-mode .desktop-widget,
body.mobile-mode .compact-preview,
body.mobile-mode .aero-progress-inner::after {
  animation: none !important;
}

body.mobile-mode .desktop-widget,
body.mobile-mode .notification.message,
body.mobile-mode .taskbar,
body.mobile-mode .desktop-icon:hover,
body.mobile-mode .desktop-icon.selected {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-mode .aero-progress-inner {
  transition: none;
}
/* Windows 7 Aero Progress Bar & GroupBox — Skinning to match ScanPapyrus photo */
.aero-progress { 
  height: 14px; 
  background: #f0f0f0; 
  border: 1px solid #a0a0a0; 
  border-radius: 2px; 
  overflow: hidden; 
  position: relative; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1); 
}

.aero-progress-inner {
  height: 100%;
  background-color: #2ed12e;
  background-image: 
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(180deg, 
      #d9f7be 0%, 
      #71e13e 48%, 
      #29b10c 52%, 
      #65db35 100%
    );
  background-size: 8px 100%, 100% 100%;
  border-right: 1px solid #2e8b2e;
  position: relative;
  transition: width 0.8s cubic-bezier(.4, 1.6, .6, 1);
  box-shadow: 0 0 4px rgba(46, 209, 46, 0.4);
}

.aero-progress-inner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.5) 50%, 
    transparent 100%
  );
  background-size: 120px 100%;
  animation: aeroPulse 3s infinite linear;
}

@keyframes aeroPulse {
  0% { transform: translateX(-120px); }
  100% { transform: translateX(500px); }
}

.aero-groupbox { 
  border: 1px solid #d4d4d4; 
  padding: 18px 14px 14px 14px; 
  margin: 16px 0; 
  position: relative; 
  border-radius: 3px; 
  background: #fdfdfd; 
  box-shadow: 1px 1px 0 #fff;
}
.aero-groupbox-legend { position: absolute; top: -10px; left: 10px; background: #fff; padding: 0 6px; font-size: 12px; color: #004675; font-weight: 500; }