/* ========================================================
   RETRO WINDOWS 95/98/XP STYLESHEET — KAI HOFFMAN CV PORTO
   Pixel-faithful reproduction of winxpcv.jpg
   ======================================================== */

:root {
  --os-teal: #008080;
  --win-gray: #c0c0c0;
  --win-gray-light: #dfdfdf;
  --win-gray-dark: #808080;
  --win-gray-darker: #404040;
  --win-black: #000000;
  --win-white: #ffffff;
  --win-title-blue-start: #000080;
  --win-title-blue-end: #1084d0;
  --win-title-inactive: #7b7b7b;
  --neon-green: #00ff41;
  --arcade-blue: #0000d8;
  --font-pixel: 'Press Start 2P', monospace;
  --font-silkscreen: 'Silkscreen', cursive;
  --font-vt: 'VT323', monospace;
  --font-gothic: 'DotGothic16', sans-serif;
  --font-pixelify: 'Pixelify Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-sys: 'MS Sans Serif', 'Tahoma', 'Segoe UI', sans-serif;

  /* Windows XP Authentic Cursors (SVG Data URIs) */
  --cursor-xp-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.5' dy='1.5' stdDeviation='0.8' flood-color='%23000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23s)' d='M2 2 L2 23 L7.5 17.5 L12 27 L15.5 25.5 L11 16 L18 16 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0, default;
  --cursor-xp-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.5' dy='1.5' stdDeviation='0.8' flood-color='%23000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M7.5 2 C6.8 2 6.2 2.6 6.2 3.3 L6.2 14.5 L5 13.3 C4.3 12.6 3.2 12.6 2.5 13.3 C1.8 14 1.8 15.1 2.5 15.8 L7.4 21.5 C8.9 23.5 11.3 24.5 13.8 24.5 C18.2 24.5 21.5 21.2 21.5 16.8 L21.5 12.5 C21.5 11.7 20.8 11 20 11 C19.6 11 19.2 11.2 18.9 11.5 C18.6 10.6 17.8 10 16.8 10 C16.4 10 16 10.2 15.7 10.4 C15.3 9.6 14.5 9 13.5 9 C13.3 9 13.1 9 12.9 9.1 L12.9 3.3 C12.9 2.6 12.3 2 11.5 2 L7.5 2 Z'/%3E%3Cpath d='M13 12 L13 16 M16 13 L16 17 M19 14 L19 18' stroke='%23888888' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") 6 2, pointer;
  --cursor-xp-wait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.5' dy='1.5' stdDeviation='0.8' flood-color='%23000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)' transform='translate(7,3)'%3E%3Crect x='1' y='1' width='16' height='3' rx='1' fill='%23d4af37' stroke='%235a4208' stroke-width='0.8'/%3E%3Crect x='1' y='22' width='16' height='3' rx='1' fill='%23d4af37' stroke='%235a4208' stroke-width='0.8'/%3E%3Cpath d='M3 4 L15 4 C15 9.5 10.5 13 9 13 C7.5 13 3 9.5 3 4 Z' fill='rgba(200,230,255,0.45)' stroke='%23003366' stroke-width='0.8'/%3E%3Cpath d='M3 22 L15 22 C15 16.5 10.5 13 9 13 C7.5 13 3 16.5 3 22 Z' fill='rgba(200,230,255,0.45)' stroke='%23003366' stroke-width='0.8'/%3E%3Cpath d='M4.5 5.5 L13.5 5.5 C12.5 9 10.5 11.5 9 12 C7.5 11.5 5.5 9 4.5 5.5 Z' fill='%230066cc'/%3E%3Cline x1='9' y1='12' x2='9' y2='19' stroke='%230066cc' stroke-width='1.2'/%3E%3Cpath d='M5 21 C6.5 18 11.5 18 13 21 Z' fill='%230066cc'/%3E%3C/g%3E%3C/svg%3E") 15 15, wait;
  --cursor-xp-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.5' dy='1.5' stdDeviation='0.8' flood-color='%23000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M2 2 L2 21 L6.5 16.5 L9.5 24 L13 22.5 L10 15 L15.5 15 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ctext x='15' y='23' font-family='Arial, Tahoma, sans-serif' font-weight='bold' font-size='14' fill='%230044bb' stroke='%23ffffff' stroke-width='0.6'%3E?%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0, help;
  --cursor-xp-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%23000000' stroke-width='1.2' stroke-linecap='square'%3E%3Cline x1='12' y1='5' x2='20' y2='5'/%3E%3Cline x1='16' y1='5' x2='16' y2='23'/%3E%3Cline x1='12' y1='23' x2='20' y2='23'/%3E%3C/g%3E%3C/svg%3E") 16 14, text;
  --cursor-xp-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.5' dy='1.5' stdDeviation='0.8' flood-color='%23000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M16 2 L12 6 L14.5 6 L14.5 13.5 L7 13.5 L7 11 L3 15 L7 19 L7 16.5 L14.5 16.5 L14.5 24 L12 24 L16 28 L20 24 L17.5 24 L17.5 16.5 L25 16.5 L25 19 L29 15 L25 11 L25 13.5 L17.5 13.5 L17.5 6 L20 6 Z'/%3E%3Ccircle cx='16' cy='15' r='1.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 16 15, move;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

body.retro-body {
  background: #245edb url('assets/bliss.png') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  font-family: var(--font-sys);
  color: var(--win-black);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  user-select: none;
  padding-bottom: 42px;
  transition: background-image 0.3s ease;
  cursor: var(--cursor-xp-default);
}

/* Authentic Windows XP Cursors Mapping */
html, body, .retro-body, .desktop-stage, .poster-canvas, .desktop-viewport {
  cursor: var(--cursor-xp-default);
}

button, a, .xp-desktop-icon, .p-tool, .sys-tab-btn, .xp-menu-item, 
.xp-menu-item-rt, .xp-task-btn, .taskbar-start-btn, .action-btn, 
[role="button"], .folder-item, .tech-badge, .contact-btn, .xp-user-tile,
.modal-cv-dl-btn, .quick-launch-icon, .tray-item, .taskbar-tray,
.xp-start-btn, .win-control-btn, .win-btn, .win-dialog-btn,
.recycle-action-btn, .recycle-nav-btn, .recycle-item, .msn-tool-btn,
.adobe-btn, .retro-action-btn, .xp-logon-go-btn, .xp-logon-quick-btn {
  cursor: var(--cursor-xp-pointer) !important;
}

input[type="text"], input[type="password"], textarea, .cmd-input, .xp-run-input,
.msn-chat-input, .xp-logon-password-input {
  cursor: var(--cursor-xp-text) !important;
}

.win-titlebar, .window-header, .xp-run-titlebar, .modal-titlebar {
  cursor: var(--cursor-xp-move);
}

.btn-help, [title*="Bantuan"], [title*="Help"] {
  cursor: var(--cursor-xp-help);
}

body.xp-loading, .xp-loading, body.xp-loading * {
  cursor: var(--cursor-xp-wait) !important;
}

body.retro-body.wp-bliss {
  background: #245edb url('assets/bliss.png') no-repeat center center fixed;
  background-size: cover;
}

body.retro-body.wp-beach {
  background: #245edb url('assets/beach.png') no-repeat center center fixed;
  background-size: cover;
}

body.retro-body.wp-city {
  background: #0b132b url('assets/city.png') no-repeat center center fixed;
  background-size: cover;
}

body.retro-body.wp-teal {
  background: #008080 fixed;
}


/* ========================================================
   CRT SCANLINES & SCREEN GLOW EFFECT
   ======================================================== */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 4px 100%;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.crt-overlay.off {
  display: none;
}

/* ========================================================
   TOP NAVIGATION CONTROL BAR
   ======================================================== */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 16px;
  background: var(--win-gray);
  border-bottom: 2px solid var(--win-black);
  box-shadow: inset 0 1px 0 var(--win-white), 0 2px 4px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-size: 12px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.os-badge {
  font-family: var(--font-silkscreen);
  font-weight: 700;
  font-size: 13px;
  color: #000080;
  letter-spacing: 0.5px;
}

.system-status {
  font-size: 11px;
  font-weight: 600;
  color: #005500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #00cc00;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ff00;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========================================================
   CLASSIC WINDOWS 95/98/XP 3D BUTTONS
   ======================================================== */
.win-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  color: var(--win-black);
  font-family: var(--font-sys);
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.win-btn-sm {
  font-size: 11px;
  padding: 3px 8px;
}

.win-btn:hover {
  background: #d4d4d4;
}

.win-btn:active, .win-btn.active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  box-shadow: inset 1px 1px 0 var(--win-black);
  transform: translate(1px, 1px);
}

.win-dialog-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  min-width: 68px;
  height: 23px;
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  outline: 1px dotted transparent;
}

.win-dialog-btn:focus {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.win-dialog-btn:active {
  border-color: var(--win-black) var(--win-white) var(--win-white) var(--win-black);
  box-shadow: inset 1px 1px 0 var(--win-gray-darker);
}

/* ========================================================
   DESKTOP WORKSPACE & POSTER CANVAS WRAPPER
   ======================================================== */
.desktop-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 16px 80px;
  min-height: calc(100vh - 42px);
  position: relative;
  background: transparent;
}

/* In Poster Mode: Roomy layout ensuring all windows & text are 100% visible */
.poster-canvas {
  position: relative;
  width: 100%;
  max-width: 880px;
  min-height: 980px;
  height: 1020px;
  margin: 0 auto;
  transition: max-width 0.3s ease, height 0.3s ease;
}

/* Wide View Mode */
.poster-canvas.wide-view-mode {
  max-width: 1100px;
  min-height: 1000px;
  height: 1040px;
}

/* ========================================================
   RETRO WINDOW CONTAINER (WINDOW CHASSIS & RESIZING)
   ======================================================== */
.win-window {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-gray-light) var(--win-black) var(--win-black) var(--win-gray-light);
  box-shadow: inset 1px 1px 0 var(--win-white), inset -1px -1px 0 var(--win-gray-dark), 3px 3px 12px rgba(0,0,0,0.45);
  position: absolute;
  user-select: none;
  min-width: 170px;
  min-height: 90px;
  box-sizing: border-box;
  transition: box-shadow 0.15s ease;
}

.win-window.is-dragging {
  opacity: 0.95;
  box-shadow: 6px 8px 24px rgba(0,0,0,0.6);
  cursor: grabbing !important;
}

.win-window.is-resizing {
  opacity: 0.96;
  box-shadow: 0 0 16px rgba(0, 0, 128, 0.4);
}

.win-window.is-focused {
  z-index: 100 !important;
}

/* Authentic Windows XP Maximized Window State */
.win-window.is-maximized {
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 4500 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}

/* 8-Direction Windows XP Resize Handles */
.win-resizer {
  position: absolute;
  z-index: 50;
}

.win-resizer.resizer-r {
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.win-resizer.resizer-l {
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.win-resizer.resizer-b {
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.win-resizer.resizer-t {
  top: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.win-resizer.resizer-br {
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.win-resizer.resizer-bl {
  bottom: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.win-resizer.resizer-tr {
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.win-resizer.resizer-tl {
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

/* Titlebar */
.win-titlebar {
  height: 24px;
  background: linear-gradient(90deg, var(--win-title-blue-start) 0%, var(--win-title-blue-end) 100%);
  color: var(--win-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 4px;
  cursor: grab;
}

.win-window.inactive .win-titlebar {
  background: linear-gradient(90deg, #808080 0%, #b0b0b0 100%);
  color: #dcdcdc;
}

.win-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: bold;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.win-icon {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.cd-icon {
  font-size: 13px;
}

/* Window Control Buttons */
.win-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.win-control-btn {
  width: 18px;
  height: 16px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  font-family: var(--font-sys);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: var(--win-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter 0.1s;
}

.win-control-btn:hover {
  filter: brightness(1.1);
}

.win-control-btn.btn-close {
  margin-left: 2px;
  font-size: 10px;
}

.win-control-btn.btn-close:hover {
  background: #e81123;
  color: #ffffff;
}

.win-control-btn:active {
  border-color: var(--win-black) var(--win-white) var(--win-white) var(--win-black);
  box-shadow: inset 1px 1px 0 var(--win-gray-dark);
}

/* Menu Bar */
.win-menubar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 8px;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-gray-dark);
  font-size: 11px;
}

.menu-item {
  cursor: pointer;
  padding: 1px 4px;
}

.menu-item:hover {
  background: #000080;
  color: #fff;
}

/* ========================================================
   1. MAIN BIG WINDOW: CD Player (Portfolio Master)
   ======================================================== */
.main-cd-window {
  top: 25px;
  left: 140px;
  width: 580px;
  height: 920px;
  z-index: 2;
}

.main-content-scroll {
  padding: 4px;
  background: var(--win-gray);
  height: calc(100% - 46px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* SECTION A: MEDIA TOP SPLIT */
.media-top-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr 16px;
  height: 250px;
  background: #000;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  position: relative;
  overflow: hidden;
}

.code-terminal-pane {
  background: #000000;
  padding: 8px 10px;
  overflow-y: auto;
  overflow-x: auto;
  border-right: 1px solid #222;
}

.neon-code {
  font-family: var(--font-vt), monospace;
  font-size: 13px;
  line-height: 1.22;
  color: var(--neon-green);
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.4);
  white-space: pre;
  word-break: normal;
}

.c-kw { color: #00ff66; font-weight: bold; }
.c-str { color: #55ff55; }
.c-com { color: #00aa33; font-style: italic; }
.c-num { color: #88ff88; }

/* Right Photo Pane with Flame & Face detect */
.designer-photo-pane {
  position: relative;
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

/* Face detect green box positioned right around the head */
.face-detect-box {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 95px;
  height: 108px;
  border: 1.5px solid var(--neon-green);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.75);
  pointer-events: none;
  animation: boxScan 3s ease-in-out infinite alternate;
}

@keyframes boxScan {
  0% { border-color: #00ff41; box-shadow: 0 0 4px #00ff41; }
  100% { border-color: #39ff14; box-shadow: 0 0 8px #39ff14; }
}

.face-label {
  position: absolute;
  top: -14px;
  left: -1px;
  background: var(--neon-green);
  color: #000;
  font-family: var(--font-sys);
  font-size: 9px;
  font-weight: bold;
  padding: 0 4px;
  line-height: 13px;
  letter-spacing: 0.5px;
}

/* Classic Scrollbar decor on right */
.classic-scrollbar-decor {
  background: var(--win-gray);
  border-left: 1px solid var(--win-gray-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-arrow {
  width: 16px;
  height: 16px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scroll-arrow:active {
  border-color: var(--win-black) var(--win-white) var(--win-white) var(--win-black);
}

.scroll-track {
  flex: 1;
  width: 100%;
  background: #e0e0e0;
  background-image: radial-gradient(#a0a0a0 15%, transparent 16%);
  background-size: 4px 4px;
  position: relative;
}

.scroll-thumb {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 48px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  cursor: grab;
}

/* SECTION B: STATUS INPUT & BADGE ROW */
.status-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

.retro-input-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  height: 22px;
  padding: 0 4px;
}

.dead-face-icon {
  font-size: 13px;
  margin-right: 4px;
  cursor: pointer;
}

.pixel-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-sys);
  font-size: 11px;
}

.social-tag-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  padding: 2px 14px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.social-tag-btn:hover {
  background: #e4e4e4;
}

.social-tag-btn:active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  box-shadow: inset 1px 1px 0 var(--win-black);
}

/* SECTION C: BEACH BANNER & CURSORS */
.beach-banner-wrap {
  position: relative;
  width: 100%;
  height: 115px;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  overflow: hidden;
}

.beach-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.beach-text-overlay {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
}

.beach-heading-1, .beach-heading-2 {
  font-family: var(--font-pixelify), var(--font-silkscreen), sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: #1a6cb8;
  text-shadow: 
    1px 1px 0 #ffffff,
    2px 2px 0 #ffffff,
    3px 3px 0 rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
}

/* Retro Pixel Cursor Arrows */
.pixel-cursors-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.p-cursor {
  position: absolute;
  width: 17px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 17 22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L0 18 L4.5 13.5 L7.5 20.5 L10.5 19 L7.5 12 L13 12 Z" fill="%23ffffff" stroke="%23000000" stroke-width="1.5"/></svg>');
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.5));
}

.p-cursor.c1 { transform: rotate(-5deg); }
.p-cursor.c2 { transform: rotate(-10deg); }
.p-cursor.c3 { transform: rotate(15deg); }
.p-cursor.c4 { transform: rotate(-25deg); }
.p-cursor.c5 { transform: rotate(-15deg); }
.p-cursor.c6 { transform: rotate(-5deg); }
.p-cursor.c7 { transform: rotate(-35deg); }
.p-cursor.c8 { transform: rotate(20deg); }

/* SECTION D: SKILLS & ABOUT & PORTFOLIO */
.skills-portfolio-section {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  padding: 6px 8px 8px;
}

.skills-header-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tab-title {
  background: #6a737d;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 10px;
  font-weight: bold;
  padding: 2px 10px;
  letter-spacing: 0.5px;
}

.tab-line {
  flex: 1;
  height: 2px;
  background: #6a737d;
}

.skills-grid-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  align-items: flex-start;
}

.bio-para {
  font-size: 10.5px;
  line-height: 1.45;
  color: #222;
  margin-bottom: 8px;
  font-family: var(--font-sys);
}

.skills-bullets-box {
  border: 1px solid #777;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  background: #fafafa;
}

.skills-col {
  list-style: none;
}

.skills-col li {
  font-size: 10px;
  line-height: 1.4;
  color: #111;
  white-space: normal;
  word-break: break-word;
  margin-bottom: 3px;
}

.skills-col .bullet {
  font-weight: bold;
  color: #000;
  margin-right: 2px;
}

/* Portfolio QR Code Column */
.portfolio-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-header-bar {
  width: 100%;
  background: #333333;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: bold;
  text-align: center;
  padding: 3px 0;
  letter-spacing: 0.5px;
}

.qr-code-frame {
  width: 100%;
  background: #fff;
  border: 1px solid #333;
  border-top: none;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.qr-code-frame:hover {
  transform: scale(1.03);
}

.qr-svg {
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
}

/* Tech Stack Apps & Tools Row */
.adobe-icons-strip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #ccc;
  flex-wrap: wrap;
}

.adobe-btn {
  width: 28px;
  height: 25px;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.adobe-btn:hover {
  background: #000080;
  color: #ffffff;
  transform: translateY(-1px);
}

.adobe-btn:active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  box-shadow: inset 1px 1px 0 var(--win-black);
  transform: translateY(0);
}

.adobe-btn.tool-fl { color: #02569B; }
.adobe-btn.tool-fg { color: #A259FF; }
.adobe-btn.tool-ps { color: #31A8FF; }
.adobe-btn.tool-php { color: #777BB4; }
.adobe-btn.tool-net { color: #512BD4; }
.adobe-btn.tool-sql { color: #CC292B; }
.adobe-btn.tool-cd { color: #00875A; }
.adobe-btn.tool-vp { color: #E53935; }
.adobe-btn:hover.tool-fl,
.adobe-btn:hover.tool-fg,
.adobe-btn:hover.tool-ps,
.adobe-btn:hover.tool-php,
.adobe-btn:hover.tool-net,
.adobe-btn:hover.tool-sql,
.adobe-btn:hover.tool-cd,
.adobe-btn:hover.tool-vp {
  color: #ffffff;
}

/* SECTION E: BLISS & "APAKAH ANDA INGIN MELANJUTKAN?" */
.bliss-bottom-wrap {
  position: relative;
  width: 100%;
  height: 155px;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  overflow: hidden;
  margin-top: 2px;
}

.bliss-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.continue-dialog-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--arcade-blue);
  border: 2px solid #3366ff;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.6), inset 0 0 8px rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  min-width: 170px;
  text-align: center;
  z-index: 10;
}

.continue-title {
  font-family: var(--font-silkscreen), var(--font-pixel), monospace;
  font-size: 8.5px;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.continue-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding-left: 14px;
}

.continue-option {
  background: none;
  border: none;
  font-family: var(--font-silkscreen), var(--font-pixel), monospace;
  font-size: 9px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  outline: none;
}

.continue-option .cursor-pointer {
  color: #ffff00;
  display: inline-block;
  width: 10px;
}

.continue-option:hover, .continue-option.active {
  color: #ffff00;
  text-shadow: 0 0 4px #ffff00;
}

/* ========================================================
   2. LEFT FLOATING WINDOW: Paint Box "IVAN RIFKI"
   ======================================================== */
.kai-paint-window {
  top: 120px;
  left: 10px;
  width: 285px;
  z-index: 15;
}

.kai-paint-body {
  padding: 6px 8px 8px;
  background: var(--win-gray);
}

.paint-top-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 6px;
}

/* 16-Toolbox Grid (2 columns x 8 rows) */
.paint-toolbox {
  display: grid;
  grid-template-columns: 20px 20px;
  grid-template-rows: repeat(8, 20px);
  gap: 2px;
  background: #d4d0c8;
  border: 1px solid #808080;
  padding: 2px;
  box-shadow: inset 1px 1px 0 #fff;
}

.p-tool {
  width: 20px;
  height: 20px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  color: #000;
  box-sizing: border-box;
  user-select: none;
}

.p-tool svg {
  width: 13px;
  height: 13px;
  display: block;
}

.p-tool .tool-letter {
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}

.p-tool:hover {
  background: #eef2f8;
}

.p-tool.active, .p-tool:active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  box-shadow: inset 1px 1px 0 var(--win-black);
  background: #e0e0e0;
}

/* Name and Dynamic Role Pixel Header */
.paint-text-block {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.kai-name {
  font-family: var(--font-silkscreen), var(--font-pixelify), 'Tahoma', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #000000;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
  margin: 0;
  padding: 0;
}

.kai-role-divider {
  width: 100%;
  height: 2px;
  background: #000000;
  margin: 6px 0;
}

.dynamic-role-wrap {
  min-height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.role-badge {
  font-family: var(--font-silkscreen), var(--font-pixelify), 'Tahoma', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #000080;
  background: #edf2ff;
  padding: 2px 5px;
  border: 1px dashed #000080;
  display: inline-block;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.role-badge.switching {
  opacity: 0;
  transform: scale(0.92);
}

/* Authentic MS Paint Color Palette (Classic 28 colors) */
.paint-palette-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ece9d8;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  padding: 4px;
  margin: 4px 0 6px 0;
}

.paint-active-colors {
  position: relative;
  width: 28px;
  height: 28px;
  background: #ece9d8;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #fff;
  flex-shrink: 0;
}

.paint-color-bg {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
  z-index: 1;
}

.paint-color-fg {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
  z-index: 2;
  transition: background-color 0.15s ease;
}

.paint-color-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 12px);
  gap: 1px;
  flex: 1;
  background: #808080;
  padding: 1px;
}

.paint-color-swatch {
  width: 100%;
  height: 12px;
  border: 1px solid rgba(0,0,0,0.25);
  box-sizing: border-box;
  cursor: pointer;
}

.paint-color-swatch:hover {
  outline: 1px solid #ffffff;
  z-index: 5;
}

/* Services Bullet List */
.kai-services-list {
  list-style: none;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  padding: 6px 8px;
  margin: 0 0 6px 0;
}

.kai-services-list li {
  font-family: var(--font-silkscreen), var(--font-sys), sans-serif;
  font-size: 8.5px;
  font-weight: bold;
  line-height: 1.5;
  color: #000080;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kai-bullet-icon {
  color: #d97706;
  font-size: 9px;
}

/* Email Box - flat native text look */
.email-btn-wrap {
  width: 100%;
  background: var(--win-white);
  border: 1px solid #000;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.email-btn {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sys);
  font-size: 10.5px;
  font-weight: bold;
  color: #000;
  padding: 1px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.email-btn:hover {
  color: #000080;
  text-decoration: underline;
}

/* ========================================================
   3. SMALL FLOATING WINDOW: City Skyline Pixel View
   ======================================================== */
.city-skyline-window {
  top: 510px;
  left: 15px;
  width: 140px;
  height: 135px;
  z-index: 6;
}

.city-body {
  padding: 2px;
  background: #000;
  height: calc(100% - 24px);
  overflow: hidden;
}

.city-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================
   4. RIGHT FLOATING WINDOW: Folders Window
   ======================================================== */
.folders-window {
  top: 380px;
  right: 15px;
  left: auto;
  width: 210px;
  z-index: 16;
}

.folders-body {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  padding: 10px 6px;
}

.folders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 6px;
  justify-items: center;
}

.folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 3px;
  border: 1px dotted transparent;
  width: 82px;
  transition: all 0.1s;
}

.folder-item:hover, .folder-item.selected {
  background: #000080;
  border-color: #ffff00;
}

.folder-item:hover .folder-label, .folder-item.selected .folder-label {
  color: #ffffff;
}

.folder-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.win-folder-svg {
  width: 28px;
  height: 28px;
}

.folder-label {
  font-family: var(--font-sys);
  font-size: 8.5px;
  font-weight: bold;
  text-align: center;
  color: #000;
  margin-top: 2px;
  line-height: 1.2;
  word-break: break-word;
}

/* ========================================================
   5. BOTTOM-LEFT ALERT DIALOG: "Status Ketersediaan"
   ======================================================== */
.trial-dialog-window {
  top: 680px;
  left: 15px;
  width: 185px;
  z-index: 18;
}

.trial-body {
  padding: 8px 6px;
  background: var(--win-gray);
  text-align: center;
}

.trial-text {
  font-family: var(--font-sys);
  font-size: 10.5px;
  line-height: 1.35;
  color: #000;
  margin-bottom: 8px;
}

.trial-btn-row {
  display: flex;
  justify-content: center;
}

/* ========================================================
   MODAL DIALOG (EASTER EGGS / FOLDER DETAILS)
   ======================================================== */
.retro-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  display: none;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99990 !important;
  backdrop-filter: blur(2px);
  padding: 12px;
  box-sizing: border-box;
}

.retro-modal-backdrop.active {
  display: flex !important;
}

.modal-window {
  position: relative !important;
  margin: auto !important;
  width: min(880px, 94vw);
  max-height: 88vh;
  max-height: 88dvh;
  display: flex !important;
  flex-direction: column !important;
  background: var(--win-gray);
  box-shadow: 0 16px 48px rgba(0,0,0,0.85);
  border: 2px solid;
  border-color: var(--win-gray-light) var(--win-black) var(--win-black) var(--win-gray-light);
  overflow: hidden;
  z-index: 99991 !important;
}

.modal-content {
  padding: 14px 16px;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  box-shadow: inset 1px 1px 0 var(--win-black);
  margin: 6px;
  max-height: calc(88vh - 84px);
  max-height: calc(88dvh - 84px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  font-size: 11px;
  line-height: 1.45;
  word-break: break-word;
}

/* Custom Windows XP Scrollbar */
.modal-content::-webkit-scrollbar,
.folders-body::-webkit-scrollbar,
.xp-task-items::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.modal-content::-webkit-scrollbar-track,
.folders-body::-webkit-scrollbar-track,
.xp-task-items::-webkit-scrollbar-track {
  background: #dfdfdf;
  border: 1px solid #999;
}

.modal-content::-webkit-scrollbar-thumb,
.folders-body::-webkit-scrollbar-thumb,
.xp-task-items::-webkit-scrollbar-thumb {
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-gray-light), inset -1px -1px 0 var(--win-gray-dark);
}

.modal-content::-webkit-scrollbar-thumb:active {
  border-color: var(--win-black) var(--win-white) var(--win-white) var(--win-black);
  box-shadow: inset 1px 1px 0 var(--win-gray-dark);
}

.modal-footer {
  padding: 6px 10px 10px;
  display: flex;
  justify-content: flex-end;
  background: var(--win-gray);
  border-top: 1px solid var(--win-gray-dark);
}

/* ========================================================
   TOAST BALLOON NOTIFICATION
   ======================================================== */
.win-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sys);
  font-size: 11px;
  color: #000;
  z-index: 9000;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.win-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   WINDOWS XP LUNA TASKBAR (AUTHENTIC SYSTEM TASKBAR)
   ======================================================== */
.xp-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 34px;
  background: linear-gradient(
    to bottom,
    #245edb 0%,
    #3f8cf3 9%,
    #245edb 18%,
    #245edb 92%,
    #1941a5 100%
  );
  border-top: 1px solid #4a8df8;
  display: flex;
  align-items: center;
  z-index: 8000;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.35);
  user-select: none;
}

/* Green Start Button */
.xp-start-btn {
  height: 34px;
  background: linear-gradient(
    to bottom,
    #388e3c 0%,
    #4caf50 12%,
    #66bb6a 25%,
    #43a047 85%,
    #2e7d32 100%
  );
  border: none;
  border-top: 1px solid #a5d6a7;
  border-right: 2px solid #1b5e20;
  border-bottom: 1px solid #1b5e20;
  border-radius: 0 12px 12px 0;
  padding: 0 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 2px 0 6px rgba(0,0,0,0.3);
  position: relative;
  transition: filter 0.15s ease;
}

.xp-start-btn:hover {
  filter: brightness(1.1);
}

.xp-start-btn:active, .xp-start-btn.active {
  background: linear-gradient(
    to bottom,
    #2e7d32 0%,
    #388e3c 20%,
    #43a047 80%,
    #1b5e20 100%
  );
  box-shadow: inset 1px 2px 4px rgba(0,0,0,0.5);
}

.xp-flag-icon {
  display: grid;
  grid-template-columns: 7px 7px;
  grid-template-rows: 7px 7px;
  gap: 1.5px;
  transform: rotate(-10deg);
}

.flag-tile.red { background: #e53935; border-radius: 2px 1px 1px 1px; }
.flag-tile.green { background: #43a047; border-radius: 1px 2px 1px 1px; }
.flag-tile.blue { background: #1e88e5; border-radius: 1px 1px 1px 2px; }
.flag-tile.yellow { background: #fdd835; border-radius: 1px 1px 2px 1px; }

.start-text {
  font-family: var(--font-sys);
  font-size: 14px;
  font-style: italic;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.5px;
}

/* Quick Launch */
.xp-quick-launch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
}

.ql-btn {
  background: transparent;
  border: 1px solid transparent;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  color: #fff;
  transition: all 0.1s;
}

.ql-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.ql-btn:active {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
}

.xp-task-separator {
  width: 2px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  margin: 0 4px;
}

/* Task Items */
.xp-task-items {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 4px;
}

.xp-task-btn {
  height: 25px;
  min-width: 110px;
  max-width: 160px;
  background: linear-gradient(
    to bottom,
    #3c81e8 0%,
    #225ad7 50%,
    #1b4eb8 100%
  );
  border: 1px solid #143c94;
  border-top-color: #6da2f3;
  border-radius: 3px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.15s ease;
}

.xp-task-btn:hover {
  background: linear-gradient(
    to bottom,
    #5393f0 0%,
    #2c69e6 50%,
    #1e56cc 100%
  );
}

.xp-task-btn.active {
  background: linear-gradient(
    to bottom,
    #1941a5 0%,
    #225ad7 50%,
    #2b6fe5 100%
  );
  border-color: #0d2864;
  border-top-color: #103480;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);
}

.xp-task-btn.minimized {
  opacity: 0.65;
  filter: grayscale(0.2);
}

.task-icon {
  font-size: 12px;
}

.task-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* System Tray (Notification Area) */
.xp-systray {
  height: 34px;
  background: linear-gradient(
    to bottom,
    #0c59b8 0%,
    #1074e7 25%,
    #0e65cb 80%,
    #094896 100%
  );
  border-left: 1px solid #083c7d;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #ffffff;
}

.tray-icon-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.tray-icon-btn:hover {
  filter: brightness(1.3);
}

.tray-icon {
  font-size: 12px;
  cursor: default;
}

.xp-clock {
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
  margin-left: 2px;
}

/* ========================================================
   WINDOWS XP LUNA START MENU
   ======================================================== */
.xp-start-menu {
  position: fixed;
  bottom: 34px;
  left: 0;
  width: 380px;
  background: #ffffff;
  border-radius: 6px 6px 0 0;
  box-shadow: 2px -4px 15px rgba(0, 0, 0, 0.45);
  border: 1px solid #001f66;
  border-bottom: none;
  z-index: 8500;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideUpXP 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpXP {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.xp-start-menu.show {
  display: flex;
}

/* Header */
.xp-start-header {
  background: linear-gradient(
    to bottom,
    #245edb 0%,
    #3f8cf3 50%,
    #245edb 100%
  );
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #ff9900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.xp-start-avatar-frame {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  background: #000;
}

.xp-start-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xp-start-username {
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.xp-start-userrole {
  font-family: var(--font-sys);
  font-size: 11px;
  color: #dbeafe;
}

/* Start Body: Two Columns */
.xp-start-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 260px;
}

.xp-start-left-col {
  background: #ffffff;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.1s;
}

.xp-menu-item:hover {
  background: #2b70f0;
  color: #ffffff;
}

.xp-menu-item:hover span, .xp-menu-item:hover strong {
  color: #ffffff !important;
}

.xp-item-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
}

.xp-item-text {
  display: flex;
  flex-direction: column;
}

.xp-item-text strong {
  font-size: 11px;
  color: #111;
}

.xp-item-text span {
  font-size: 9.5px;
  color: #666;
}

.xp-menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 6px;
}

.xp-start-right-col {
  background: #d3e5fa;
  border-left: 1px solid #9bbce6;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xp-menu-item-rt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #0d2864;
  transition: all 0.1s;
}

.xp-menu-item-rt:hover {
  background: #2b70f0;
  color: #ffffff;
}

.xp-rt-icon {
  font-size: 14px;
}

.xp-menu-divider-rt {
  height: 1px;
  background: #b5cde8;
  margin: 4px 6px;
}

/* Start Footer */
.xp-start-footer {
  background: linear-gradient(
    to bottom,
    #3f8cf3 0%,
    #245edb 100%
  );
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #6ba5f8;
}

.xp-footer-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.xp-footer-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ========================================================
   ENHANCED MODAL CONTENT STYLING (NO TEXT CUT OFF)
   ======================================================== */
.modal-cv-container {
  font-family: var(--font-sys);
  color: #111;
  word-break: break-word;
  overflow-wrap: break-word;
}

.modal-section-title {
  font-size: 13px;
  font-weight: bold;
  color: #000080;
  border-bottom: 2px solid #000080;
  padding-bottom: 4px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.modal-card {
  background: #f7f9fa;
  border: 1px solid #ccd5db;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.modal-card-title {
  font-weight: bold;
  font-size: 12px;
  color: #000080;
  margin-bottom: 3px;
  line-height: 1.3;
}

.modal-card-sub {
  font-size: 10px;
  color: #4a5568;
  margin-bottom: 6px;
  line-height: 1.35;
  font-weight: 600;
}

.modal-card-desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: #2d3748;
  word-break: break-word;
}

.modal-card-desc strong {
  color: #111827;
}

.modal-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.modal-tag {
  background: #e2e8f0;
  color: #1a202c;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
}

.modal-cv-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to bottom, #2e7d32 0%, #1b5e20 100%);
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 7px 14px;
  border-radius: 3px;
  font-size: 11.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  margin-top: 10px;
  border: 1px solid #144917;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.modal-cv-dl-btn:hover {
  filter: brightness(1.15);
}

/* ========================================================
   AUTHENTIC WINDOWS XP LOGON / WELCOME SCREEN
   ======================================================== */
.xp-logon-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: radial-gradient(circle at 65% 50%, #003399 0%, #002277 55%, #001344 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  font-family: var(--font-sys);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.xp-logon-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  pointer-events: none;
}

.xp-logon-top-bar {
  height: 65px;
  width: 100%;
  background: #001238;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, transparent, #e65c00 35%, #ffaa00 65%, transparent) 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.xp-logon-bottom-bar {
  height: 75px;
  width: 100%;
  background: #001238;
  border-top: 2px solid;
  border-image: linear-gradient(to right, transparent, #e65c00 35%, #ffaa00 65%, transparent) 1;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  color: #a0c0ff;
  font-size: 11px;
}

.xp-logon-power-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.xp-logon-power-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.xp-power-icon {
  background: #cc0000;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.xp-logon-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
  gap: 40px;
  padding: 20px 0;
}

/* Left Column: Branding */
.xp-logon-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-right: 20px;
}

.xp-logon-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.xp-flag-icon-lg {
  display: grid;
  grid-template-columns: 14px 14px;
  grid-template-rows: 14px 14px;
  gap: 3px;
  transform: rotate(-10deg);
}

.flag-tile-lg.red { background: #e53935; border-radius: 3px 2px 2px 2px; }
.flag-tile-lg.green { background: #43a047; border-radius: 2px 3px 2px 2px; }
.flag-tile-lg.blue { background: #1e88e5; border-radius: 2px 2px 2px 3px; }
.flag-tile-lg.yellow { background: #fdd835; border-radius: 2px 2px 3px 2px; }

.xp-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.xp-brand-ms {
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.xp-brand-xp {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.5px;
}

.xp-brand-xp .xp-orange {
  color: #ff9900;
  font-style: italic;
  margin-left: 2px;
}

.xp-brand-edition {
  font-size: 10px;
  color: #99c2ff;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.xp-logon-instruction {
  color: #ffffff;
  font-size: 13px;
  max-width: 260px;
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Center Divider */
.xp-logon-divider {
  width: 2px;
  height: 240px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.4) 80%, transparent);
}

/* Right Column: User Tile */
.xp-logon-right {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.xp-user-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  max-width: 420px;
}

.xp-user-tile:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ff9900;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.xp-user-tile.selected {
  background: rgba(0, 30, 100, 0.5);
  border-color: #ffaa00;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.6);
}

.xp-user-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.xp-user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: block;
  object-fit: cover;
}

.xp-user-info-box {
  flex: 1;
}

.xp-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin-bottom: 2px;
}

.xp-user-role {
  font-size: 10.5px;
  color: #ffcc66;
  font-weight: bold;
  margin-bottom: 2px;
}

.xp-user-status {
  font-size: 9.5px;
  color: #b0cfff;
  margin-bottom: 8px;
}

.xp-logon-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.xp-logon-password-input {
  flex: 1;
  height: 24px;
  background: #ffffff;
  border: 2px solid;
  border-color: #7f9db9 #ffffff #ffffff #7f9db9;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
  padding: 0 8px;
  font-family: var(--font-sys);
  font-size: 11px;
  border-radius: 2px;
  outline: none;
}

.xp-logon-password-input:focus {
  border-color: #316ac5;
}

.xp-logon-go-btn {
  width: 24px;
  height: 24px;
  background: linear-gradient(to bottom, #43a047 0%, #2e7d32 100%);
  border: 1px solid #1b5e20;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
}

.xp-logon-go-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.xp-logon-quick-btn {
  margin-top: 8px;
  background: linear-gradient(to bottom, #245edb 0%, #1941a5 100%);
  border: 1px solid #0d2864;
  border-radius: 3px;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
}

.xp-logon-quick-btn:hover {
  filter: brightness(1.15);
}

.xp-logon-status {
  margin-top: 12px;
  display: none;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 12px;
}

.xp-logon-status.show {
  display: flex;
}

.xp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ff9900;
  border-radius: 50%;
  animation: xp-spin 0.8s linear infinite;
}

@keyframes xp-spin {
  to { transform: rotate(360deg); }
}

/* ========================================================
   AUTHENTIC WINDOWS XP SHUTDOWN SCREEN (Safe to Turn Off)
   ======================================================== */
.xp-shutdown-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at center, #181818 0%, #080808 60%, #000000 100%);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  user-select: none;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.xp-shutdown-screen.active {
  display: flex;
  opacity: 1;
}

.shutdown-crt-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.75) 100%),
              repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.25) 3px);
  z-index: 1;
}

.shutdown-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 620px;
  width: 100%;
}

.shutdown-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 119, 0, 0.35);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: var(--font-sys);
  font-size: 11px;
  color: #ff9933;
  letter-spacing: 1px;
  margin-bottom: 20px;
  box-shadow: 0 0 12px rgba(255, 119, 0, 0.15);
}

.shutdown-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5500;
  box-shadow: 0 0 8px #ff5500, 0 0 14px rgba(255, 85, 0, 0.8);
  animation: shutdown-led-pulse 2s infinite ease-in-out;
}

@keyframes shutdown-led-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.shutdown-icon-wrap {
  margin-bottom: 18px;
}

.shutdown-power-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a2a2a 0%, #111111 100%);
  border: 2px solid #ff7700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ff7700;
  box-shadow: 0 0 20px rgba(255, 119, 0, 0.35), inset 0 0 10px rgba(255, 119, 0, 0.2);
  text-shadow: 0 0 8px #ff7700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shutdown-power-circle:hover {
  transform: scale(1.08);
  border-color: #22c55e;
  color: #22c55e;
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.55), inset 0 0 12px rgba(34, 197, 94, 0.3);
  text-shadow: 0 0 12px #22c55e;
}

.shutdown-text-orange {
  font-family: "Lucida Console", Monaco, "Courier New", var(--font-sys), sans-serif;
  font-size: clamp(20px, 4.5vw, 30px);
  font-weight: bold;
  color: #ff6600;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.7), 0 0 22px rgba(255, 102, 0, 0.35);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  line-height: 1.35;
}

.shutdown-divider {
  width: 100%;
  max-width: 440px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff7700 30%, #ffaa00 50%, #ff7700 70%, transparent);
  margin: 12px auto 16px auto;
  opacity: 0.6;
}

.shutdown-subtext {
  font-family: var(--font-sys);
  font-size: 13px;
  color: #cccccc;
  line-height: 1.5;
  margin-bottom: 8px;
  max-width: 500px;
}

.shutdown-subtext strong {
  color: #ffffff;
}

.shutdown-prompt {
  font-family: var(--font-sys);
  font-size: 11px;
  color: #888888;
  margin-bottom: 24px;
}

.shutdown-action-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.xp-restart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #3d8b3d 0%, #2e7d32 45%, #1b5e20 100%);
  border: 1px solid #144617;
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-sys);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(46, 125, 50, 0.4);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  min-width: 240px;
  max-width: 100%;
  box-sizing: border-box;
}

.xp-restart-btn:hover {
  background: linear-gradient(180deg, #4caf50 0%, #388e3c 45%, #236b28 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 20px rgba(76, 175, 80, 0.6);
}

.xp-restart-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #1e5e22 0%, #2e7d32 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.xp-restart-icon {
  font-size: 16px;
  display: inline-block;
  transition: transform 0.4s ease;
}

.xp-restart-btn:hover .xp-restart-icon {
  transform: rotate(180deg);
}

/* ========================================================
   AUTHENTIC WINDOWS XP BOOT / SPLASH SCREEN
   ======================================================== */
.xp-boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000000;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.xp-boot-screen.active {
  display: flex;
}

.xp-boot-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.xp-boot-crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0, 0, 0, 0.8) 100%),
              repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.3) 3px);
  z-index: 1;
}

.xp-boot-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Windows XP Boot Logo */
.xp-boot-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.xp-boot-flag {
  display: grid;
  grid-template-columns: 18px 18px;
  grid-template-rows: 18px 18px;
  gap: 4px;
  transform: rotate(-10deg) skew(-4deg, 0);
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.15));
}

.boot-flag-tile.red {
  background: linear-gradient(135deg, #ff5e57 0%, #e02424 100%);
  border-radius: 4px 2px 2px 2px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}

.boot-flag-tile.green {
  background: linear-gradient(135deg, #2ecc71 0%, #059669 100%);
  border-radius: 2px 4px 2px 2px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}

.boot-flag-tile.blue {
  background: linear-gradient(135deg, #3498db 0%, #1d4ed8 100%);
  border-radius: 2px 2px 2px 4px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}

.boot-flag-tile.yellow {
  background: linear-gradient(135deg, #f1c40f 0%, #d97706 100%);
  border-radius: 2px 2px 4px 2px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}

.xp-boot-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.xp-boot-ms {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.xp-boot-name {
  font-family: 'Franklin Gothic Medium', 'Segoe UI', Tahoma, sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.xp-boot-xp {
  color: #ff6600;
  background: linear-gradient(180deg, #ff8c00 0%, #e65100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 3px;
  font-style: italic;
  font-family: sans-serif;
}

.xp-boot-edition {
  font-family: var(--font-sys);
  font-size: 10px;
  color: #3b82f6;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Iconic 3-Block Blue Progress Bar */
.xp-boot-bar-container {
  width: 220px;
  margin: 10px auto;
}

.xp-boot-bar-track {
  width: 100%;
  height: 18px;
  background: #000000;
  border: 2px solid #5a5a5a;
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.xp-boot-blocks-group {
  position: absolute;
  top: 2px;
  left: -70px;
  display: flex;
  gap: 3px;
  animation: xp-boot-marquee-anim 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes xp-boot-marquee-anim {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}

.xp-boot-block {
  width: 15px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 50%, #1e3a8a 100%);
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.xp-boot-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sys);
  font-size: 11px;
  color: #94a3b8;
  margin-top: 14px;
}

.xp-boot-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
  animation: xp-boot-dot-pulse 1s infinite alternate;
}

@keyframes xp-boot-dot-pulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.xp-boot-footer {
  position: absolute;
  bottom: 24px;
  width: 100%;
  text-align: center;
  font-family: var(--font-sys);
  font-size: 10px;
  color: #4b5563;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* ========================================================
   WINDOWS XP MOBILE QUICK NAVIGATION RIBBON
   ======================================================== */
.xp-mobile-nav {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  margin: 4px auto 14px auto;
  padding: 6px 8px;
  background: linear-gradient(180deg, #f5f4eb 0%, #ece9d8 40%, #ded9c4 100%);
  border: 2px solid;
  border-color: #ffffff #807d70 #807d70 #ffffff;
  box-shadow: inset 1px 1px 0 #ffffff, 0 3px 10px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  position: sticky;
  top: 36px;
  z-index: 500;
  backdrop-filter: blur(8px);
}

.xp-mobile-nav-title {
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #08246b;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #ffffff;
  padding-left: 2px;
}

.xp-mobile-nav-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
  flex: 1;
}

.xp-mobile-nav-scroll::-webkit-scrollbar {
  display: none;
}

.xp-mobile-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #000000;
  background: linear-gradient(180deg, #ffffff 0%, #ece9d8 60%, #ded7c0 100%);
  border: 1px solid;
  border-color: #ffffff #716f64 #716f64 #ffffff;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 0 1px 2px rgba(0,0,0,0.15);
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.xp-mobile-nav-btn:hover {
  background: linear-gradient(180deg, #fff7d9 0%, #fedb7c 50%, #fec846 100%);
  border-color: #e5a700 #8c5b00 #8c5b00 #e5a700;
}

.xp-mobile-nav-btn:active,
.xp-mobile-nav-btn.active {
  background: linear-gradient(180deg, #1f67d2 0%, #2f7cf6 50%, #1557bf 100%);
  color: #ffffff;
  border-color: #0c3c8c #5c9bfb #5c9bfb #0c3c8c;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.45);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.xp-mobile-nav-btn .m-icon {
  font-size: 13px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* Focused Window Pulse Highlight (Mobile & Desktop) */
@keyframes xpWindowPulse {
  0% { box-shadow: 0 0 0 0 rgba(49, 106, 197, 0.9); }
  50% { box-shadow: 0 0 0 8px rgba(49, 106, 197, 0.4); }
  100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
}

.win-window.xp-focus-pulse {
  animation: xpWindowPulse 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Window Shade / Collapsed Accordion Mode on Mobile */
.win-window.is-collapsed .win-body,
.win-window.is-collapsed .win-menubar,
.win-window.is-collapsed .win-statusbar {
  display: none !important;
}

.win-window.is-collapsed {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 8px !important;
}

.win-window.is-collapsed .win-titlebar {
  border-radius: 6px;
}

/* ========================================================
   RESPONSIVENESS & MOBILE-FIRST WINDOW ADAPTATION
   ======================================================== */
@media (max-width: 768px) {
  /* Logon screen responsive */
  .xp-logon-center {
    flex-direction: column;
    gap: 20px;
  }
  .xp-logon-left {
    align-items: center;
    text-align: center;
    padding-right: 0;
  }
  .xp-brand-text {
    align-items: center;
  }
  .xp-logon-divider {
    width: 80%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
  }
  .xp-logon-right {
    align-items: center;
  }
  .xp-logon-bottom-bar {
    padding: 0 16px;
    font-size: 9.5px;
  }

  /* Desktop Stage & Mobile Navigation */
  .desktop-stage {
    padding: 8px 8px 65px 8px !important;
    min-height: 100vh;
    overflow-x: hidden;
    display: block !important;
  }

  .xp-mobile-nav {
    display: flex !important;
  }

  /* Desktop Icons Grid at Top */
  .xp-desktop-icons-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 4px auto 14px auto !important;
    padding: 10px 6px !important;
    background: rgba(0, 35, 100, 0.4) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  .xp-desktop-icon {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 2px !important;
  }

  .xp-icon-label {
    max-width: 100% !important;
    font-size: 10.5px !important;
  }

  /* Poster Canvas: Natural Single Column Card Flow */
  .poster-canvas,
  .poster-canvas.wide-view-mode {
    width: 100% !important;
    max-width: 600px !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 auto !important;
    position: relative !important;
    transform: none !important;
    padding: 0 !important;
  }

  /* All Windows become stacked, fluid, touch-friendly blocks */
  .poster-canvas .win-window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 0 12px 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    z-index: 10 !important;
  }

  /* Resizer handles hidden on mobile to avoid touch conflicts */
  .win-resizer {
    display: none !important;
  }

  /* Enhanced touch targets for window controls */
  .win-titlebar {
    padding: 4px 6px !important;
    height: auto !important;
    min-height: 32px !important;
    cursor: default !important;
  }

  .win-title {
    font-size: 12px !important;
    gap: 6px !important;
  }

  .win-controls {
    gap: 4px !important;
  }

  .win-control-btn {
    width: 24px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  /* Floating Popups & Modals: Centered fixed modals */
  .sysprops-window,
  .recycle-bin-window,
  .msn-window,
  .xp-run-dialog,
  .minesweeper-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: 520px !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    z-index: 9950 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75) !important;
    margin: 0 !important;
  }

  /* Retro Backdrop Modals (Folder contents & details) */
  .modal-window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100vw - 16px) !important;
    max-width: 560px !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 99991 !important;
  }

  .modal-content {
    max-height: calc(86vh - 84px) !important;
    max-height: calc(86dvh - 84px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 11px !important;
  }

  /* Inside Main CD Window */
  .media-top-split {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 12px !important;
  }

  .terminal-box {
    max-height: 180px !important;
    font-size: 11px !important;
  }

  .photo-frame {
    height: 220px !important;
  }

  .skills-grid-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .adobe-icons-strip {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }

  .adobe-tool-btn {
    height: 36px !important;
  }

  .status-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .status-input-row .win-input {
    width: 100% !important;
  }

  .bliss-bottom-wrap {
    height: 130px !important;
  }

  /* Inside MS Paint Window */
  .paint-top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .paint-toolbox {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    grid-template-rows: repeat(2, 28px) !important;
    width: 100% !important;
    height: auto !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  .p-tool {
    width: 100% !important;
    height: 28px !important;
  }

  .p-tool svg {
    width: 15px !important;
    height: 15px !important;
  }

  .paint-text-block {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    text-align: center !important;
  }

  .paint-palette-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  .paint-color-grid {
    grid-template-columns: repeat(14, 1fr) !important;
    grid-template-rows: repeat(2, 14px) !important;
  }

  .paint-color-swatch {
    height: 14px !important;
  }

  /* Inside Folders Window */
  .folders-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .folder-item {
    padding: 8px 4px !important;
  }

  /* City Skyline Window */
  .city-skyline-window {
    height: auto !important;
  }

  .skyline-img {
    height: 120px !important;
    object-fit: cover !important;
  }

  /* Taskbar on Mobile */
  .xp-taskbar {
    height: 38px !important;
  }

  .xp-task-items {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-right: 4px !important;
  }

  .xp-task-items::-webkit-scrollbar {
    display: none !important;
  }

  .xp-task-btn {
    min-width: 42px !important;
    max-width: 120px !important;
    flex-shrink: 0 !important;
    padding: 2px 6px !important;
  }

  .task-label {
    font-size: 10.5px !important;
  }

  .xp-start-menu {
    width: calc(100vw - 12px) !important;
    max-width: 380px !important;
    left: 6px !important;
    bottom: 42px !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
  }

  .xp-start-body {
    flex-direction: column !important;
    height: auto !important;
  }

  .xp-start-left-col,
  .xp-start-right-col {
    width: 100% !important;
  }

  /* Balloon Tooltip on Mobile */
  .xp-balloon-tip {
    bottom: 44px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    transform-origin: bottom center !important;
  }
}

@media (max-width: 480px) {
  .xp-desktop-icons-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px 4px !important;
  }

  .folders-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .xp-task-btn {
    max-width: 90px !important;
  }

  .top-nav-bar {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 4px 6px !important;
    gap: 4px !important;
  }
}

/* ========================================================== */
/* WINDOWS XP DESKTOP BLUE MARQUEE SELECTION BOX              */
/* ========================================================== */
.xp-selection-marquee {
  position: fixed;
  border: 1px dotted #0055ea;
  background: rgba(49, 106, 197, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 9999;
  display: none;
}

/* ========================================================== */
/* WINDOWS XP AUTHENTIC DESKTOP ICONS                         */
/* ========================================================== */
.xp-desktop-icons-container {
  position: absolute;
  top: 48px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 25;
  user-select: none;
  pointer-events: auto;
}

.xp-desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  outline: none;
}

.xp-desktop-icon:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.xp-desktop-icon:focus,
.xp-desktop-icon.selected {
  background: rgba(10, 80, 200, 0.55);
  border: 1px dotted #ffffff;
  box-shadow: 0 0 4px rgba(0, 50, 160, 0.6);
}

.xp-icon-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.5));
}

.xp-svg-icon {
  width: 36px;
  height: 36px;
}

.xp-icon-label {
  margin-top: 4px;
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000, 0 0 4px rgba(0, 30, 90, 0.9);
  line-height: 1.25;
  word-break: break-word;
  max-width: 74px;
}

.xp-desktop-icon:focus .xp-icon-label,
.xp-desktop-icon.selected .xp-icon-label {
  background: #0b50be;
  padding: 0 2px;
  border-radius: 2px;
}

/* System Properties Window */
.sysprops-window {
  width: 430px;
  min-height: 420px;
  background: var(--win-gray);
  position: absolute;
  top: 100px;
  left: 180px;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,0.75);
}

.sysprops-tabs {
  display: flex;
  padding: 8px 8px 0;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-gray-dark);
  gap: 2px;
}

.sys-tab-btn {
  padding: 4px 10px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  border: 1px solid;
  border-color: var(--win-white) var(--win-gray-dark) transparent var(--win-white);
  background: #d8d4cc;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  position: relative;
  top: 1px;
}

.sys-tab-btn.active {
  background: var(--win-gray);
  border-bottom-color: var(--win-gray);
  font-weight: bold;
  top: 1px;
  z-index: 2;
}

.sysprops-body {
  padding: 12px;
  background: var(--win-gray);
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  color: #000;
  min-height: 250px;
}

.sys-general-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
}

.sys-flag-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10px;
}

.sys-info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sys-section-block {
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 6px;
}

.sys-label {
  color: #000080;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 2px;
}

.sys-val {
  font-size: 11px;
  line-height: 1.35;
  color: #222;
}

.sys-device-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-item {
  background: #ffffff;
  border: 1px solid #7f9db9;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
}

.sys-cert-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sys-cert-list li {
  line-height: 1.4;
}

.sys-contact-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.sysprops-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  background: var(--win-gray);
  border-top: 1px solid #ffffff;
}

/* Recycle Bin Window */
.recycle-bin-window {
  width: 520px;
  min-height: 360px;
  position: absolute;
  top: 130px;
  left: 210px;
  z-index: 55;
  box-shadow: 0 10px 30px rgba(0,0,0,0.75);
}

.recycle-explorer-wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  min-height: 250px;
  background: #ffffff;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
}

.recycle-sidebar {
  background: linear-gradient(to bottom, #7ba2e7, #6375d6);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-box {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sidebar-header {
  background: linear-gradient(to right, #215dc6, #3882f6);
  color: #ffffff;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
}

.sidebar-links {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recycle-action-btn,
.recycle-nav-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: 'Tahoma', sans-serif;
  font-size: 10.5px;
  color: #0c439c;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 2px;
}

.recycle-action-btn:hover,
.recycle-nav-btn:hover {
  background: #d6e3f8;
  text-decoration: underline;
}

.recycle-file-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.recycle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
}

.recycle-item:hover {
  background: #eef4fe;
  border-color: #b8d6fb;
}

.recycle-item:focus {
  background: #316ac5;
  color: #ffffff;
  border-color: #316ac5;
}

.recycle-item:focus .recycle-item-info span {
  color: #e0e8ff;
}

.recycle-item-icon {
  font-size: 20px;
}

.recycle-item-info {
  display: flex;
  flex-direction: column;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
}

.recycle-item-info span {
  font-size: 9.5px;
  color: #666;
}

/* Windows Messenger Window */
.msn-window {
  width: 440px;
  min-height: 400px;
  position: absolute;
  top: 90px;
  left: 240px;
  z-index: 65;
  box-shadow: 0 10px 30px rgba(0,0,0,0.75);
}

.msn-header-banner {
  background: linear-gradient(to bottom, #f2f7fd, #d8e5f8);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #9bb5d9;
}

.msn-avatar-box {
  position: relative;
  width: 44px;
  height: 44px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
}

.msn-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msn-online-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #00c800;
  border: 1px solid #fff;
  border-radius: 50%;
}

.msn-user-meta {
  display: flex;
  flex-direction: column;
  font-family: 'Tahoma', sans-serif;
}

.msn-user-title {
  font-weight: bold;
  font-size: 11.5px;
  color: #000080;
}

.msn-status-text {
  font-weight: normal;
  color: #008800;
  font-size: 10.5px;
}

.msn-user-tagline {
  font-size: 10px;
  color: #444;
}

.msn-user-email {
  font-size: 9.5px;
  color: #777;
}

.msn-action-toolbar {
  display: flex;
  background: #eef3fb;
  border-bottom: 1px solid #b6cced;
  padding: 4px 8px;
  gap: 6px;
}

.msn-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-family: 'Tahoma', sans-serif;
  font-size: 10.5px;
  color: #0c439c;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
}

.msn-tool-btn:hover {
  background: #dbe7f9;
  border-color: #9cbce8;
}

.msn-chat-history {
  background: #ffffff;
  padding: 10px;
  min-height: 160px;
  max-height: 200px;
  overflow-y: auto;
  border: 2px solid;
  border-color: var(--win-gray-dark) var(--win-white) var(--win-white) var(--win-gray-dark);
  margin: 6px;
  font-family: 'Tahoma', sans-serif;
}

.msn-system-msg {
  font-size: 9.5px;
  color: #888;
  text-align: center;
  margin-bottom: 8px;
}

.msn-bubble-partner,
.msn-bubble-user {
  margin-bottom: 8px;
}

.bubble-sender {
  font-size: 10px;
  color: #0c439c;
  font-weight: bold;
  margin-bottom: 2px;
}

.bubble-body {
  font-size: 11px;
  line-height: 1.35;
  color: #111;
  background: #f0f5ff;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid #0055ea;
}

.msn-bubble-user .bubble-sender {
  color: #008000;
  text-align: right;
}

.msn-bubble-user .bubble-body {
  background: #eaffea;
  border-left: none;
  border-right: 3px solid #008000;
  text-align: right;
}

.msn-input-zone {
  display: flex;
  padding: 6px 8px 8px;
  gap: 6px;
  background: var(--win-gray);
}

.msn-text-field {
  flex: 1;
  padding: 4px 6px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  border: 1px solid #7f9db9;
}

@keyframes msn-nudge {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-6px, 4px) rotate(-1deg); }
  40% { transform: translate(6px, -4px) rotate(1deg); }
  60% { transform: translate(-4px, -3px) rotate(-1deg); }
  80% { transform: translate(4px, 3px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.msn-nudge-active {
  animation: msn-nudge 0.45s ease;
}

/* ========================================================== */
/* AUTHENTIC WINDOWS XP BALLOON NOTIFICATION TOOLTIP          */
/* ========================================================== */
.xp-balloon-tip {
  position: fixed;
  bottom: 38px;
  right: 16px;
  width: 295px;
  max-width: calc(100vw - 32px);
  background: #ffffe1;
  border: 1px solid #000000;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 99999;
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  user-select: none;
  animation: xp-balloon-in 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  transform-origin: bottom right;
}

.xp-balloon-tip.closing {
  animation: xp-balloon-out 0.25s ease forwards;
}

@keyframes xp-balloon-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes xp-balloon-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
}

.balloon-inner {
  padding: 8px 10px 10px 10px;
}

.balloon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

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

.balloon-icon {
  font-size: 14px;
  line-height: 1;
}

.balloon-title {
  font-size: 11.5px;
  font-weight: bold;
  color: #0c439c;
  letter-spacing: 0.2px;
}

.balloon-close-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #555555;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.balloon-close-btn:hover {
  background: #e81123;
  color: #ffffff;
  border-color: #a80000;
}

.balloon-body-wrap {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 4px;
  transition: background 0.15s ease;
}

.balloon-body-wrap:hover {
  background: rgba(0, 0, 0, 0.04);
}

.balloon-text {
  font-size: 11px;
  line-height: 1.45;
  color: #222222;
  margin: 0 0 6px 0;
}

.balloon-text strong {
  color: #000080;
}

.balloon-action-row {
  display: flex;
  justify-content: flex-end;
}

.balloon-cta {
  font-size: 10px;
  font-weight: bold;
  color: #0c439c;
  text-decoration: underline;
  cursor: pointer;
}

.balloon-body-wrap:hover .balloon-cta {
  color: #002573;
}

/* Authentic Windows XP Balloon Pointer Beak */
.balloon-arrow {
  position: absolute;
  bottom: -9px;
  right: 28px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #000000;
}

.balloon-arrow::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #ffffe1;
}

/* System Tray animated bulb icon */
.tray-anim-icon {
  display: inline-block;
  animation: tray-pulse 2.5s infinite;
}

@keyframes tray-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 4px #ffd700); }
}

/* ========================================================
   LUNA THEME VARIATIONS (Rekomendasi #3)
   Blue (Default), Silver/Metallic, Olive Green/Homestead
   ======================================================== */

/* --- LUNA SILVER / METALLIC THEME --- */
body.retro-body.luna-silver .xp-taskbar {
  background: linear-gradient(180deg, #d6d9e0 0%, #b2b7c1 40%, #9ca2af 80%, #7c8494 100%);
  border-top-color: #e5e8ee;
}

body.retro-body.luna-silver .xp-start-btn {
  background: linear-gradient(180deg, #c5c8d0 0%, #9ca2af 50%, #8b92a1 100%);
  border-color: #e5e8ee #5a6070 #5a6070 #e5e8ee;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
body.retro-body.luna-silver .xp-start-btn:hover {
  background: linear-gradient(180deg, #d0d3db 0%, #aab0bc 50%, #9ca2af 100%);
}

body.retro-body.luna-silver .win-titlebar {
  background: linear-gradient(90deg, #6b7184 0%, #9ea4b4 50%, #b0b6c6 100%);
}
body.retro-body.luna-silver .win-window.inactive .win-titlebar {
  background: linear-gradient(90deg, #8e929c 0%, #b8bbc4 100%);
}

body.retro-body.luna-silver .xp-start-menu {
  border-color: #8b92a1;
}
body.retro-body.luna-silver .xp-start-header {
  background: linear-gradient(90deg, #6b7184 0%, #9ea4b4 100%);
}
body.retro-body.luna-silver .xp-start-footer {
  background: linear-gradient(180deg, #b2b7c1 0%, #9ca2af 100%);
}

body.retro-body.luna-silver .xp-task-btn.active {
  background: linear-gradient(180deg, #c5c8d0 0%, #aab0bc 100%);
  border-color: #e0e3ea #6b7184 #6b7184 #e0e3ea;
}

body.retro-body.luna-silver .xp-systray {
  background: linear-gradient(180deg, #a0a6b4 0%, #8b92a1 100%);
}

/* --- LUNA OLIVE GREEN / HOMESTEAD THEME --- */
body.retro-body.luna-olive .xp-taskbar {
  background: linear-gradient(180deg, #c8c9a4 0%, #9a9d5c 40%, #7a8b50 80%, #5c6e32 100%);
  border-top-color: #dddeb8;
}

body.retro-body.luna-olive .xp-start-btn {
  background: linear-gradient(180deg, #a8b050 0%, #7a8b2e 50%, #5c6e32 100%);
  border-color: #c8d270 #3a4a18 #3a4a18 #c8d270;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
body.retro-body.luna-olive .xp-start-btn:hover {
  background: linear-gradient(180deg, #b8c060 0%, #8a9b3e 50%, #6c7e42 100%);
}

body.retro-body.luna-olive .win-titlebar {
  background: linear-gradient(90deg, #6b7830 0%, #8a9b40 50%, #a0b458 100%);
}
body.retro-body.luna-olive .win-window.inactive .win-titlebar {
  background: linear-gradient(90deg, #8e9270 0%, #b0b498 100%);
}

body.retro-body.luna-olive .xp-start-menu {
  border-color: #7a8b50;
}
body.retro-body.luna-olive .xp-start-header {
  background: linear-gradient(90deg, #6b7830 0%, #8a9b40 100%);
}
body.retro-body.luna-olive .xp-start-footer {
  background: linear-gradient(180deg, #9a9d5c 0%, #7a8b50 100%);
}

body.retro-body.luna-olive .xp-task-btn.active {
  background: linear-gradient(180deg, #b8c080 0%, #8a9b40 100%);
  border-color: #d0d890 #5c6e32 #5c6e32 #d0d890;
}

body.retro-body.luna-olive .xp-systray {
  background: linear-gradient(180deg, #8a9b50 0%, #6b7830 100%);
}

/* Luna Theme Selector Tray Dropdown */
.luna-theme-selector {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: #f0f0f0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.4), inset 1px 1px 0 #dfdfdf;
  padding: 6px;
  z-index: 6000;
  display: none;
  min-width: 180px;
}

.luna-theme-selector.show {
  display: block;
}

.luna-theme-selector .luna-title {
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000080;
  text-align: center;
  padding: 2px 0 5px;
  border-bottom: 1px solid #c0c0c0;
  margin-bottom: 5px;
}

.luna-theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  cursor: pointer;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid transparent;
  transition: background 0.1s;
}

.luna-theme-option:hover {
  background: #000080;
  color: #ffffff;
  border-color: #000080;
}

.luna-theme-option.active {
  background: #e0e0ff;
  border: 1px dotted #000080;
}

.luna-theme-option:hover.active {
  background: #000080;
  color: #ffffff;
}

.luna-color-swatch {
  width: 18px;
  height: 14px;
  border: 1px solid #555;
  border-radius: 2px;
  flex-shrink: 0;
}

.luna-color-swatch.swatch-blue {
  background: linear-gradient(135deg, #003399 0%, #1084d0 100%);
}
.luna-color-swatch.swatch-silver {
  background: linear-gradient(135deg, #7c8494 0%, #b2b7c1 100%);
}
.luna-color-swatch.swatch-olive {
  background: linear-gradient(135deg, #5c6e32 0%, #9a9d5c 100%);
}


/* ========================================================
   RUN DIALOG & BSOD EASTER EGG (Rekomendasi #6)
   ======================================================== */

/* --- RUN DIALOG (Win+R) --- */
.xp-run-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 7000;
  display: none;
  justify-content: center;
  align-items: center;
}

.xp-run-backdrop.show {
  display: flex;
}

.xp-run-dialog {
  background: #ece9d8;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5), inset 1px 1px 0 #f5f3eb;
  width: 420px;
  max-width: 92vw;
  user-select: none;
}

.xp-run-titlebar {
  height: 26px;
  background: linear-gradient(90deg, var(--win-title-blue-start) 0%, var(--win-title-blue-end) 100%);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 4px;
  font-size: 12px;
  font-weight: bold;
}

body.retro-body.luna-silver .xp-run-titlebar {
  background: linear-gradient(90deg, #6b7184 0%, #9ea4b4 50%, #b0b6c6 100%);
}
body.retro-body.luna-olive .xp-run-titlebar {
  background: linear-gradient(90deg, #6b7830 0%, #8a9b40 50%, #a0b458 100%);
}

.xp-run-body {
  padding: 16px 18px 14px;
}

.xp-run-desc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.xp-run-icon-svg {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.xp-run-desc p {
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
  color: #000;
}

.xp-run-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.xp-run-input-row label {
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.xp-run-input {
  flex: 1;
  height: 22px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  padding: 0 6px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #000;
  outline: none;
  background: #fff;
}

.xp-run-input:focus {
  border-color: #0055ea #c0c0c0 #c0c0c0 #0055ea;
}

.xp-run-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.xp-run-buttons .win-dialog-btn {
  min-width: 72px;
}

/* --- BSOD (Blue Screen of Death) EASTER EGG --- */
.xp-bsod-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0000aa;
  z-index: 99999;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 60px;
  font-family: 'Lucida Console', 'Courier New', monospace;
  color: #ffffff;
  overflow: hidden;
}

.xp-bsod-overlay.show {
  display: flex;
  animation: bsodFlash 0.15s ease-out;
}

@keyframes bsodFlash {
  0% { opacity: 0; transform: scale(1.02); }
  40% { opacity: 1; }
  100% { transform: scale(1); }
}

.bsod-header {
  background: #aaaaaa;
  color: #0000aa;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 12px;
  letter-spacing: 3px;
  margin-bottom: 30px;
  text-align: center;
}

.bsod-body {
  max-width: 680px;
  width: 100%;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.5px;
  text-align: left;
}

.bsod-body p {
  margin: 0 0 18px 0;
}

.bsod-body .bsod-code {
  font-weight: bold;
  color: #ffffff;
}

.bsod-body .bsod-counter {
  animation: bsodBlink 0.7s steps(1, end) infinite;
}

@keyframes bsodBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.bsod-recovery-bar {
  margin-top: 24px;
  font-size: 12px;
  color: #cccccc;
  animation: bsodFade 0.5s ease-in 2.5s forwards;
  opacity: 0;
}

@keyframes bsodFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ======================================================== */
/* MINESWEEPER RETRO WINDOW & ENGINE STYLES (WINDOWS XP)    */
/* ======================================================== */
.minesweeper-window {
  position: absolute;
  top: 90px;
  left: 280px;
  width: auto;
  min-width: 210px;
  max-width: 95vw;
  background: #c0c0c0;
  border: 3px solid #0055ea;
  border-radius: 6px 6px 0 0;
  box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  user-select: none;
  z-index: 1005;
}

/* Luna Theme Adapters for Minesweeper */
body.luna-silver .minesweeper-window {
  border-color: #929bb0;
}
body.luna-olive .minesweeper-window {
  border-color: #63773a;
}

.xp-minesweeper-menubar {
  display: flex;
  background: #ece9d8;
  border-bottom: 1px solid #d4d0c8;
  padding: 1px 4px;
  gap: 2px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  position: relative;
  z-index: 20;
}

.menu-dropdown-container {
  position: relative;
  display: inline-block;
}

.menu-dropdown-container .menu-item {
  padding: 3px 6px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-block;
}

.menu-dropdown-container .menu-item:hover,
.menu-dropdown-container.open .menu-item {
  background: #316ac5;
  color: #ffffff;
  border-radius: 2px;
}

.menu-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #808080;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
  padding: 2px 0;
  min-width: 200px;
  z-index: 9999;
}

.menu-dropdown-container.open .menu-dropdown-menu {
  display: block;
}

.menu-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px;
  font-size: 11px;
  font-family: 'Tahoma', sans-serif;
  color: #000000;
  cursor: pointer;
  white-space: nowrap;
}

.menu-dropdown-item:hover {
  background: #316ac5;
  color: #ffffff;
}

.menu-dropdown-item.active {
  font-weight: bold;
}

.menu-dropdown-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 3px 1px;
}

.menu-shortcut {
  font-size: 10px;
  color: #777777;
  margin-left: 14px;
}

.menu-dropdown-item:hover .menu-shortcut {
  color: #ffffff;
}

/* Quick Toolbar for Difficulty & Touch mode */
.ms-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ece9d8;
  padding: 4px 6px;
  border-bottom: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  gap: 6px;
  flex-wrap: wrap;
}

.ms-diff-btns {
  display: flex;
  gap: 3px;
}

.ms-tool-btn {
  font-family: 'Tahoma', sans-serif;
  font-size: 10.5px;
  padding: 2px 7px;
  background: #ece9d8;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  cursor: pointer;
  color: #000;
  transition: all 0.1s ease;
}

.ms-tool-btn:hover {
  background: #e0ecf8;
  border-color: #316ac5;
}

.ms-tool-btn.active {
  background: #316ac5;
  color: #fff;
  border-color: #1e4b8a;
  font-weight: bold;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

.ms-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  padding: 2px 8px;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  color: #000;
}

.ms-mode-btn.mode-dig {
  background: #eef8ee;
  border-color: #2e7d32;
  color: #1b5e20;
}

.ms-mode-btn.mode-flag {
  background: #fde8e8;
  border-color: #d32f2f;
  color: #b71c1c;
}

/* Minesweeper Board Game Container */
.minesweeper-game-wrap {
  padding: 8px;
  background: #bdbdbd;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  max-height: calc(100vh - 180px);
  -webkit-overflow-scrolling: touch;
}

.ms-play-area {
  display: inline-block;
  background: #bdbdbd;
  margin: 0 auto;
}

/* Table frame structure from Sprite */
.ms-table-root {
  border-collapse: collapse;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.ms-table-root td {
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* Board Header Controls */
.ms-header-panel {
  background: #bdbdbd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  width: 100%;
  box-sizing: border-box;
}

.ms-face-btn {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  background-image: url('assets/minesweeper_sprite.png');
  background-repeat: no-repeat;
  background-position: 0px -55px;
  cursor: pointer;
  border: none;
  padding: 0;
  outline: none;
  display: block;
}

.ms-face-btn.face-smile { background-position: 0px -55px; }
.ms-face-btn.face-pressed { background-position: -26px -55px; }
.ms-face-btn.face-scared { background-position: -52px -55px; }
.ms-face-btn.face-dead { background-position: -78px -55px; }
.ms-face-btn.face-won { background-position: -104px -55px; }

/* 7-Segment LED Digits */
.ms-ssd-wrap {
  display: inline-flex;
  background: #000000;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 1px;
  height: 25px;
  box-sizing: border-box;
}

.ms-ssd-digit {
  width: 13px;
  height: 23px;
  background-image: url('assets/minesweeper_sprite.png');
  background-repeat: no-repeat;
  background-position: 0px -32px;
  display: inline-block;
}

.ms-ssd-digit.d-0 { background-position: 0px -32px; }
.ms-ssd-digit.d-1 { background-position: -13px -32px; }
.ms-ssd-digit.d-2 { background-position: -26px -32px; }
.ms-ssd-digit.d-3 { background-position: -39px -32px; }
.ms-ssd-digit.d-4 { background-position: -52px -32px; }
.ms-ssd-digit.d-5 { background-position: -65px -32px; }
.ms-ssd-digit.d-6 { background-position: -78px -32px; }
.ms-ssd-digit.d-7 { background-position: -91px -32px; }
.ms-ssd-digit.d-8 { background-position: -104px -32px; }
.ms-ssd-digit.d-9 { background-position: -117px -32px; }
.ms-ssd-digit.d-minus { background-position: -130px -32px; }
.ms-ssd-digit.d-blank { background-position: -143px -32px; }

/* Board Container & Insets */
.ms-board-container {
  border: 3px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.ms-header-inset {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 5px;
  width: 100%;
  box-sizing: border-box;
}

.ms-grid-inset {
  border: 3px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  display: inline-block;
  line-height: 0;
  overflow: auto;
  max-width: 100%;
}

.ms-grid-table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

.ms-grid-table td {
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* Board Tile Cells */
.ms-tile {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  background-image: url('assets/minesweeper_sprite.png');
  background-repeat: no-repeat;
  background-position: 0px -16px;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  touch-action: manipulation;
}

/* Tile state classes */
.ms-tile.tile-closed { background-position: 0px -16px; }
.ms-tile.tile-pressed { background-position: -16px -16px; }
.ms-tile.tile-0 { background-position: -16px -16px; }
.ms-tile.tile-1 { background-position: 0px 0px; }
.ms-tile.tile-2 { background-position: -16px 0px; }
.ms-tile.tile-3 { background-position: -32px 0px; }
.ms-tile.tile-4 { background-position: -48px 0px; }
.ms-tile.tile-5 { background-position: -64px 0px; }
.ms-tile.tile-6 { background-position: -80px 0px; }
.ms-tile.tile-7 { background-position: -96px 0px; }
.ms-tile.tile-8 { background-position: -112px 0px; }
.ms-tile.tile-mine { background-position: -32px -16px; }
.ms-tile.tile-flag { background-position: -48px -16px; }
.ms-tile.tile-wrong { background-position: -64px -16px; }
.ms-tile.tile-exploded { background-position: -80px -16px; }
.ms-tile.tile-question { background-position: -96px -16px; }
.ms-tile.tile-question-pressed { background-position: -112px -16px; }

/* Statusbar */
.ms-statusbar {
  background: #ece9d8;
  border-top: 1px solid #999;
  padding: 2px 8px;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  color: #333333;
}

/* Mobile Responsiveness for Minesweeper Window */
@media (max-width: 768px) {
  .minesweeper-window {
    top: 60px !important;
    left: 4px !important;
    right: 4px !important;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }
  .minesweeper-game-wrap {
    padding: 4px;
    overflow-x: auto;
  }
  .ms-toolbar {
    padding: 3px;
    gap: 4px;
  }
  .ms-tool-btn {
    font-size: 10px;
    padding: 2px 5px;
  }
}