* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; font-family: 'Tahoma', 'Segoe UI', sans-serif; font-size:11px; }

/* ===== BOOT SCREEN ===== */
#boot-screen {
  position:fixed; inset:0; background:#000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:99999;
}
.boot-logo { text-align:center; margin-bottom:40px; }
.boot-flag { width:60px; height:60px; margin:0 auto 16px; position:relative; border-radius:6px; overflow:hidden; }
.flag-red { position:absolute; top:0; left:0; width:50%; height:50%; background:#f25022; }
.flag-green { position:absolute; top:0; right:0; width:50%; height:50%; background:#7fba00; }
.flag-blue { position:absolute; bottom:0; left:0; width:50%; height:50%; background:#00a4ef; }
.flag-yellow { position:absolute; bottom:0; right:0; width:50%; height:50%; background:#ffb900; }
.boot-text { color:#fff; font-size:22px; font-weight:bold; letter-spacing:1px; }
.boot-xp { color:#ff6b00; font-size:28px; }
.boot-progress { width:200px; height:16px; border:2px solid #555; border-radius:8px; overflow:hidden; background:#222; }
.boot-progress-bar { width:0%; height:100%; background: linear-gradient(90deg, #0055cc, #0099ff); border-radius:6px; animation: bootLoad 2.5s ease-in-out forwards; }
@keyframes bootLoad { 0%{width:0%} 100%{width:100%} }

/* ===== WELCOME ===== */
#welcome-screen {
  position:fixed; inset:0;
  background: linear-gradient(135deg, #1a3a6e 0%, #2b5ea7 30%, #3a7bd5 60%, #1a3a6e 100%);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.welcome-text {
  color:#fff; font-size:30px; font-weight:bold; text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: fadeInUp 0.8s ease;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ===== DESKTOP ===== */
#desktop {
  position:fixed; inset:0;
  background: linear-gradient(180deg, #245EDC 0%, #3a8f35 25%, #3fa337 50%, #4bb33f 75%, #3fa337 100%);
  overflow:hidden;
}

/* ===== DESKTOP ICONS ===== */
#desktop-icons {
  position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:8px; z-index:1;
}
.desktop-icon {
  width:75px; padding:6px 4px; display:flex; flex-direction:column; align-items:center;
  gap:3px; cursor:pointer; border-radius:3px; text-align:center;
}
.desktop-icon:hover { background:rgba(80,140,255,0.35); }
.desktop-icon:active { background:rgba(80,140,255,0.5); }
.desktop-icon span {
  color:#fff; font-size:11px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  word-break:break-word; line-height:1.2;
}
.icon-img { width:48px; height:48px; border-radius:4px; }

/* Icon sprites (CSS drawn) */
.mycomputer-icon {
  background: linear-gradient(135deg, #808080 0%, #c0c0c0 20%, #e0e0e0 40%, #888 60%);
  border: 2px solid #555; position:relative;
}
.mycomputer-icon::after {
  content:''; position:absolute; top:6px; left:8px; right:8px; bottom:14px;
  background:#000; border:2px solid #666; border-radius:2px;
  box-shadow: inset 0 0 10px rgba(0,100,200,0.3);
}
.mycomputer-icon::before {
  content:''; position:absolute; bottom:4px; left:14px; right:14px; height:6px;
  background:#aaa; border-radius:0 0 3px 3px; border:1px solid #777;
}
.mydocuments-icon {
  background: linear-gradient(180deg, #f4d03f 0%, #e8b812 100%);
  border:1px solid #c59a08; border-radius:2px; position:relative;
}
.mydocuments-icon::after {
  content:''; position:absolute; top:0; left:0; width:50%; height:30%;
  background:#f0c800; border-radius:2px 0 6px 0; border:1px solid #c59a08;
}
.ie-icon {
  background: radial-gradient(circle at 30% 30%, #4a9eff, #0055cc);
  border:2px solid #003d99; border-radius:50%; position:relative;
}
.ie-icon::after {
  content:'e'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:28px; font-weight:bold; font-style:italic;
  font-family: 'Georgia', serif;
}
.notepad-icon {
  background: linear-gradient(180deg, #f5f5dc 0%, #eee 100%);
  border:1px solid #aaa; border-radius:2px; position:relative;
}
.notepad-icon::before {
  content:''; position:absolute; top:8px; left:6px; right:6px;
  height:1px; background:#ccc; box-shadow: 0 4px 0 #ccc, 0 8px 0 #ccc, 0 12px 0 #ccc, 0 16px 0 #ccc, 0 20px 0 #ccc;
}
.notepad-icon::after {
  content:''; position:absolute; top:0; right:6px; width:12px; height:100%;
  background:repeating-linear-gradient(0deg, transparent, transparent 4px, #6bf 4px, #6bf 5px);
}
.calculator-icon {
  background: linear-gradient(180deg, #d0d0d0 0%, #bbb 100%);
  border:1px solid #888; border-radius:4px; position:relative;
}
.calculator-icon::after {
  content:''; position:absolute; top:4px; left:4px; right:4px; height:14px;
  background:#8f8; border:1px solid #5a5; border-radius:2px;
}
.paint-icon {
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  border:1px solid #aaa; border-radius:3px; position:relative; overflow:hidden;
}
.paint-icon::after {
  content:''; position:absolute; bottom:4px; left:4px; right:4px; height:20px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  border-radius:2px;
}
.recycle-icon {
  background: linear-gradient(180deg, #c0c0c0 0%, #999 100%);
  border:1px solid #777; border-radius:3px; position:relative;
}
.recycle-icon::after {
  content:'🗑'; font-size:30px; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.youtube-icon {
  background: #ff0000; border-radius:10px; position:relative;
}
.youtube-icon::after {
  content:''; position:absolute; top:50%; left:55%; width:0; height:0;
  border-left:18px solid #fff; border-top:10px solid transparent;
  border-bottom:10px solid transparent; transform:translate(-50%,-50%);
  margin-left:2px;
}

/* Small icons */
.si-icon { width:32px; height:32px; flex-shrink:0; border-radius:3px; }
.ie-icon-sm { background:radial-gradient(circle at 30% 30%,#4a9eff,#0055cc); border:2px solid #003d99; border-radius:50%; position:relative; }
.ie-icon-sm::after { content:'e'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:bold; font-style:italic; font-family:'Georgia',serif; }
.notepad-icon-sm { background:linear-gradient(180deg,#f5f5dc,#eee); border:1px solid #aaa; }
.paint-icon-sm { background:#fff; border:1px solid #aaa; position:relative; overflow:hidden; }
.paint-icon-sm::after { content:''; position:absolute; bottom:2px; left:2px; right:2px; height:10px; background:linear-gradient(90deg,red,orange,yellow,green,blue,violet); border-radius:1px; }
.calculator-icon-sm { background:linear-gradient(180deg,#d0d0d0,#bbb); border:1px solid #888; border-radius:3px; position:relative; }
.calculator-icon-sm::after { content:''; position:absolute; top:2px; left:2px; right:2px; height:8px; background:#8f8; border:1px solid #5a5; border-radius:1px; }
.youtube-icon-sm { background:#ff0000; border-radius:6px; position:relative; }
.youtube-icon-sm::after { content:'▶'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; margin-left:1px; }
.minesweeper-icon { background:#c0c0c0; border:2px solid #808080; border-radius:3px; position:relative; display:flex; align-items:center; justify-content:center; }
.minesweeper-icon::after { content:'💣'; font-size:28px; }
.solitaire-icon { background:#1a6b1a; border:2px solid #0d4d0d; border-radius:4px; position:relative; }
.solitaire-icon::after { content:'♠♥'; font-size:18px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mediaplayer-icon { background:linear-gradient(135deg,#f57c00,#ff9800,#ffc107); border:2px solid #e65100; border-radius:4px; position:relative; }
.mediaplayer-icon::after { content:'▶'; font-size:26px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.4); }
.minesweeper-icon-sm { background:#c0c0c0; border:2px solid #808080; border-radius:3px; position:relative; }
.minesweeper-icon-sm::after { content:'💣'; font-size:18px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.solitaire-icon-sm { background:#1a6b1a; border:2px solid #0d4d0d; border-radius:3px; position:relative; }
.solitaire-icon-sm::after { content:'♠'; font-size:20px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.mediaplayer-icon-sm { background:linear-gradient(135deg,#f57c00,#ff9800); border:2px solid #e65100; border-radius:3px; position:relative; }
.mediaplayer-icon-sm::after { content:'▶'; font-size:16px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.cmd-icon-sm { background:#000; border:2px solid #333; border-radius:3px; position:relative; }
.cmd-icon-sm::after { content:'>'; font-size:16px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#c0c0c0; font-family:monospace; font-weight:bold; }

/* ===== MINESWEEPER ===== */
.mine-menu { display:flex; gap:4px; padding:2px 8px; background:#ece9d8; border-bottom:1px solid #bbb; }
.mine-menu span { padding:2px 6px; cursor:pointer; font-size:11px; }
.mine-menu span:hover { background:#316ac5; color:#fff; }
.mine-body { padding:8px; background:#c0c0c0; height:100%; display:flex; flex-direction:column; align-items:center; }
.mine-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; padding:6px 10px; background:#c0c0c0; border:2px inset #808080; }
.mine-counter { background:#000; color:#f00; font-family:'Courier New',monospace; font-size:22px; font-weight:bold; padding:2px 6px; letter-spacing:2px; border:1px inset #333; }
.mine-reset { font-size:24px; cursor:pointer; background:#c0c0c0; border:2px outset #fff; padding:2px 8px; }
.mine-reset:active { border:2px inset #808080; }
.mine-field { display:grid; gap:0; border:3px inset #808080; padding:2px; background:#c0c0c0; }
.mine-cell { width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:bold; cursor:pointer; border:2px outset #fff; background:#c0c0c0; }
.mine-cell.revealed { border:1px solid #808080; background:#c0c0c0; cursor:default; }
.mine-cell.mine-boom { background:#ff0000; }

/* ===== SOLITAIRE ===== */
.sol-menu { display:flex; gap:4px; padding:2px 8px; background:#ece9d8; border-bottom:1px solid #bbb; }
.sol-menu span { padding:2px 6px; cursor:pointer; font-size:11px; }
.sol-menu span:hover { background:#316ac5; color:#fff; }
.sol-board { padding:10px; background:#1a6b1a; height:calc(100% - 26px); overflow:auto; }
.sol-top { display:flex; gap:16px; margin-bottom:16px; align-items:flex-start; }
.sol-stock, .sol-waste { width:70px; height:100px; display:flex; align-items:center; justify-content:center;
  font-size:48px; cursor:pointer; color:#444; }
.sol-waste { cursor:default; }
.sol-foundations { display:flex; gap:8px; }
.sol-foundation { width:70px; height:100px; border:2px dashed rgba(255,255,255,0.3); border-radius:4px;
  display:flex; align-items:center; justify-content:center; }
.sol-tableau { display:flex; gap:12px; justify-content:center; }
.sol-column { display:flex; flex-direction:column; align-items:center; min-width:75px; }
.sol-card { width:70px; height:100px; border-radius:5px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:14px; font-weight:bold; flex-shrink:0;
  position:relative; }
.sol-card.face-down { background:linear-gradient(135deg,#1a3d8a,#2450c8); border:2px solid #0d2560;
  color:#fff; font-size:28px; cursor:pointer; }
.sol-card.face-up { background:#fff; border:2px solid #999; cursor:pointer; }
.sol-card.face-up:hover { border-color:#316ac5; box-shadow:0 0 5px rgba(50,100,200,0.5); }
.sol-card-val { font-size:16px; line-height:1; }
.sol-card-suit { font-size:22px; line-height:1; }
.sol-card .red { color:#cc0000; }
.sol-card .black { color:#000; }
.sol-empty { background:transparent; border:2px dashed rgba(255,255,255,0.2); }

/* ===== MEDIA PLAYER ===== */
.wmp-container { display:flex; flex-direction:column; height:100%; background:#2a2a3d; color:#fff; }
.wmp-menubar { display:flex; gap:4px; padding:2px 8px; background:#1a1a2e; border-bottom:1px solid #333; flex-shrink:0; }
.wmp-menubar span { padding:2px 6px; cursor:pointer; font-size:11px; color:#ccc; }
.wmp-menubar span:hover { background:#444; color:#fff; }
.wmp-main { flex:1; display:flex; overflow:hidden; }
.wmp-viz { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#0a0a1a,#1a1a3d); position:relative; }
.wmp-logo { font-size:16px; color:#666; margin-bottom:20px; }
.wmp-bars { display:flex; gap:3px; align-items:flex-end; height:80px; }
.wmp-bar { width:12px; background:linear-gradient(180deg,#00cc66,#ff6600,#ff0066); border-radius:2px 2px 0 0;
  animation:wmpBarAnim 0.5s ease-in-out infinite alternate; }
@keyframes wmpBarAnim { 0%{height:10%} 100%{height:90%} }
.wmp-playlist { width:200px; background:#1a1a2e; border-left:1px solid #333; overflow-y:auto; flex-shrink:0; }
.wmp-track { padding:6px 8px; cursor:pointer; font-size:11px; display:flex; justify-content:space-between;
  border-bottom:1px solid #222; }
.wmp-track:hover { background:#2a2a4d; }
.wmp-track.active { background:#0066cc; color:#fff; }
.wmp-controls { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#1a1a2e;
  border-top:1px solid #333; flex-shrink:0; }
.wmp-btns { display:flex; gap:4px; }
.wmp-btns button { width:32px; height:28px; background:linear-gradient(180deg,#444,#222); border:1px solid #555;
  border-radius:3px; color:#fff; font-size:14px; cursor:pointer; }
.wmp-btns button:hover { background:linear-gradient(180deg,#555,#333); }
.wmp-progress-wrap { flex:1; height:8px; background:#111; border-radius:4px; overflow:hidden; border:1px solid #333; }
.wmp-progress-bar { width:0%; height:100%; background:linear-gradient(90deg,#00cc66,#ff6600); border-radius:4px; transition:width 0.1s; }
.wmp-info { font-size:11px; color:#aaa; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== CMD ===== */
.cmd-output {
  flex:1; padding:4px 8px; background:#000; color:#c0c0c0; font-family:'Lucida Console','Courier New',monospace;
  font-size:12px; overflow-y:auto; white-space:pre-wrap; line-height:1.4;
}
.cmd-input {
  width:100%; padding:4px 8px; background:#000; color:#c0c0c0; border:none; outline:none;
  font-family:'Lucida Console','Courier New',monospace; font-size:12px;
}
.cmd-cursor { animation:blink 1s step-start infinite; }
@keyframes blink { 50%{opacity:0} }

/* ===== TASKBAR ===== */
#taskbar {
  position:fixed; bottom:0; left:0; right:0; height:36px; z-index:10000;
  background: linear-gradient(180deg, #3168d5 0%, #2450c8 30%, #1e3fbb 60%, #1832a8 100%);
  border-top:2px solid #5c8ee5;
  display:flex; align-items:stretch;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
}
#start-btn {
  display:flex; align-items:center; gap:5px; padding:0 12px 0 8px;
  background: linear-gradient(180deg, #3d9b35 0%, #2d8a28 30%, #1e7520 60%, #186218 100%);
  border:none; border-right:1px solid #15500f; border-radius: 0 10px 10px 0;
  color:#fff; font-size:12px; font-weight:bold; cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,0.5); letter-spacing:0.5px;
}
#start-btn:hover { background: linear-gradient(180deg, #4aab42 0%, #3d9b35 30%, #2d8a28 60%, #1e7520 100%); }
#start-btn:active { background: linear-gradient(180deg, #1e7520 0%, #186218 100%); }
.start-flag { width:18px; height:18px; position:relative; border-radius:2px; overflow:hidden; flex-shrink:0; }
.sf-r { position:absolute; top:0; left:0; width:50%; height:50%; background:#f25022; }
.sf-g { position:absolute; top:0; right:0; width:50%; height:50%; background:#7fba00; }
.sf-b { position:absolute; bottom:0; left:0; width:50%; height:50%; background:#00a4ef; }
.sf-y { position:absolute; bottom:0; right:0; width:50%; height:50%; background:#ffb900; }

#taskbar-apps {
  flex:1; display:flex; align-items:center; padding:0 4px; gap:2px; overflow:hidden;
}
.taskbar-app {
  height:26px; padding:0 10px; display:flex; align-items:center; gap:4px;
  background: linear-gradient(180deg, #3c7ae8 0%, #2a5cc8 50%, #1e4ab0 100%);
  border:1px solid #1a3d99; border-radius:3px; color:#fff; font-size:11px;
  cursor:pointer; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis;
}
.taskbar-app.active {
  background: linear-gradient(180deg, #1a3d99 0%, #152d77 50%, #0e1f55 100%);
  border:1px solid #0a1540; box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
}
.taskbar-app:hover { background: linear-gradient(180deg, #4a8af5 0%, #3a6cd8 50%, #2a5cc8 100%); }

#system-tray {
  display:flex; align-items:center; gap:6px; padding:0 10px;
  background: linear-gradient(180deg, #1290e9 0%, #0d6fc0 50%, #0855a0 100%);
  border-left:1px solid #0a3d88; font-size:11px; color:#fff;
}
.tray-icons { display:flex; gap:3px; font-size:12px; }
.tray-icon { cursor:default; }
#clock { font-size:11px; white-space:nowrap; }

/* ===== START MENU ===== */
#start-menu {
  position:fixed; bottom:36px; left:0; z-index:10001;
  width:380px; background:#fff; border:2px solid #2450c8; border-radius:8px 8px 0 0;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.4); overflow:hidden;
}
.start-menu-header {
  background: linear-gradient(180deg, #245edc 0%, #1a45b0 100%);
  padding:8px 12px; display:flex; align-items:center; gap:10px;
}
.user-avatar {
  width:40px; height:40px; background:linear-gradient(135deg, #ddd, #fff);
  border:2px solid #fff; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:22px;
}
.user-name { color:#fff; font-size:14px; font-weight:bold; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.start-menu-body { display:flex; min-height:280px; }
.start-menu-left {
  flex:1; padding:6px; background:#fff; border-right:1px solid #d0d0d0;
}
.start-menu-right {
  width:160px; padding:6px; background:linear-gradient(180deg, #d3e5fa 0%, #c1d8f2 100%);
}
.start-item {
  display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:3px; cursor:pointer;
}
.start-item:hover { background:#2b71d8; color:#fff; }
.start-item:hover .si-text small { color:#cde; }
.si-text { line-height:1.3; }
.si-text small { color:#888; }
.start-separator { height:1px; background:#d0d0d0; margin:4px 0; }
.start-item-right {
  padding:4px 8px; border-radius:3px; cursor:pointer; font-size:11px;
}
.start-item-right:hover { background:#2b71d8; color:#fff; }
.start-menu-footer {
  display:flex; gap:6px; padding:6px 10px;
  background:linear-gradient(180deg, #3c7ae8 0%, #2450c8 100%);
  border-top:1px solid #1a3d99;
}
.start-footer-btn {
  flex:1; padding:5px 6px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  border-radius:3px; color:#fff; font-size:10px; cursor:pointer;
}
.start-footer-btn:hover { background:rgba(255,255,255,0.25); }

/* ===== WINDOWS ===== */
.xp-window {
  position:absolute; min-width:300px; min-height:200px;
  background:#ece9d8; border:1px solid #0055e5; border-radius:8px 8px 0 0;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3); display:flex; flex-direction:column;
  overflow:hidden;
}
.xp-window.maximized {
  top:0!important; left:0!important; width:100%!important;
  height:calc(100% - 36px)!important; border-radius:0;
}
.xp-window.focused { z-index:100; }
.xp-window:not(.focused) .window-titlebar {
  background: linear-gradient(180deg, #7a96df 0%, #5f7fca 30%, #4a6ab5 100%);
}
.window-titlebar {
  display:flex; align-items:center; gap:6px; padding:4px 4px 4px 8px;
  background: linear-gradient(180deg, #0f72e6 0%, #0b5fc7 30%, #0748a5 100%);
  cursor:default; flex-shrink:0;
}
.window-icon { width:16px; height:16px; flex-shrink:0; }
.window-title { flex:1; color:#fff; font-size:12px; font-weight:bold; text-shadow:0 1px 1px rgba(0,0,0,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-controls { display:flex; gap:2px; }
.win-btn {
  width:21px; height:21px; border:none; border-radius:3px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold;
  color:#fff; line-height:1;
}
.win-minimize { background: linear-gradient(180deg, #3d97e8 0%, #2070cc 100%); }
.win-minimize:hover { background: linear-gradient(180deg, #5ab0f5 0%, #3d97e8 100%); }
.win-maximize { background: linear-gradient(180deg, #3d97e8 0%, #2070cc 100%); }
.win-maximize:hover { background: linear-gradient(180deg, #5ab0f5 0%, #3d97e8 100%); }
.win-close { background: linear-gradient(180deg, #e8743d 0%, #cc3020 100%); }
.win-close:hover { background: linear-gradient(180deg, #f59a5a 0%, #e8743d 100%); }
.window-body { flex:1; overflow:auto; background:#fff; padding:0; }

/* Window resize handle */
.window-resize {
  position:absolute; bottom:0; right:0; width:14px; height:14px; cursor:nwse-resize;
}

/* ===== MENU BAR ===== */
.window-menubar {
  display:flex; padding:2px 4px; background:#ece9d8; border-bottom:1px solid #bbb; flex-shrink:0;
}
.window-menubar span {
  padding:2px 8px; cursor:pointer; font-size:11px;
}
.window-menubar span:hover { background:#316ac5; color:#fff; }

/* ===== STATUS BAR ===== */
.window-statusbar {
  display:flex; padding:2px 8px; background:#ece9d8; border-top:1px solid #bbb;
  font-size:11px; color:#444; flex-shrink:0;
}

/* ===== NOTEPAD ===== */
.notepad-textarea {
  width:100%; height:100%; border:none; outline:none; resize:none;
  font-family: 'Lucida Console', 'Courier New', monospace; font-size:13px;
  padding:4px 8px; line-height:1.4;
}

/* ===== CALCULATOR ===== */
.calc-container { padding:8px; background:#ece9d8; height:100%; display:flex; flex-direction:column; }
.calc-display {
  background:#d4e8d4; border:2px inset #888; padding:4px 8px; text-align:right;
  font-size:20px; font-family:'Courier New',monospace; margin-bottom:8px; min-height:32px;
  overflow:hidden; white-space:nowrap;
}
.calc-buttons { display:grid; grid-template-columns: repeat(4,1fr); gap:3px; flex:1; }
.calc-btn {
  border:1px solid #888; border-radius:3px; font-size:13px; font-weight:bold;
  cursor:pointer; background:linear-gradient(180deg, #f0f0f0, #ddd);
  display:flex; align-items:center; justify-content:center; padding:4px;
}
.calc-btn:hover { background:linear-gradient(180deg, #fff, #eee); }
.calc-btn:active { background:linear-gradient(180deg, #ccc, #bbb); }
.calc-btn.num { background:linear-gradient(180deg, #fff, #e8e8e8); }
.calc-btn.op { background:linear-gradient(180deg, #f0e0c0, #ddd0a0); }
.calc-btn.eq { background:linear-gradient(180deg, #d0d0ff, #b0b0ee); }
.calc-btn.clear { background:linear-gradient(180deg, #fdd, #f99); }

/* ===== MY COMPUTER ===== */
.explorer-container { display:flex; height:100%; }
.explorer-sidebar {
  width:180px; background:linear-gradient(180deg, #d3e5fa 0%, #b8d4f0 100%);
  padding:8px; border-right:1px solid #bbb; flex-shrink:0; overflow-y:auto;
}
.explorer-sidebar h4 { font-size:11px; color:#21528e; margin:8px 0 4px; }
.explorer-sidebar a {
  display:block; padding:3px 6px; color:#21528e; text-decoration:none; font-size:11px; border-radius:3px;
}
.explorer-sidebar a:hover { background:#316ac5; color:#fff; }
.explorer-main { flex:1; padding:8px; overflow-y:auto; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.explorer-item {
  width:80px; padding:6px 4px; display:flex; flex-direction:column; align-items:center;
  gap:3px; border-radius:3px; cursor:pointer; text-align:center;
}
.explorer-item:hover { background:rgba(50,100,200,0.15); }
.explorer-item span { font-size:10px; word-break:break-word; }
.explorer-folder { width:40px; height:36px; background:linear-gradient(180deg, #f4d03f, #e8b812); border:1px solid #c59a08; border-radius:2px; position:relative; }
.explorer-folder::after { content:''; position:absolute; top:0; left:0; width:45%; height:28%; background:#f0c800; border-radius:2px 0 4px 0; border:1px solid #c59a08; }
.explorer-file { width:36px; height:40px; background:#fff; border:1px solid #aaa; border-radius:2px; position:relative; }
.explorer-file::after { content:''; position:absolute; top:0; right:0; width:10px; height:10px; background:#ddd; border-left:1px solid #aaa; border-bottom:1px solid #aaa; }
.explorer-drive { width:40px; height:32px; background:linear-gradient(180deg, #c0c0c0, #999); border:1px solid #777; border-radius:3px; }
.explorer-drive::after { content:''; position:absolute; bottom:6px; left:8px; right:8px; height:3px; background:#0c0; border-radius:1px; box-shadow: 0 0 4px #0f0; }

/* ===== PAINT ===== */
.paint-container { display:flex; flex-direction:column; height:100%; }
.paint-toolbar {
  display:flex; gap:4px; padding:4px 8px; background:#ece9d8; border-bottom:1px solid #bbb; flex-wrap:wrap; align-items:center;
}
.paint-tool {
  width:24px; height:24px; border:1px solid #999; border-radius:2px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px; background:#f0f0f0;
}
.paint-tool:hover { border-color:#316ac5; background:#d8e8f8; }
.paint-tool.active { border-color:#316ac5; background:#b0c8e8; }
.paint-colors {
  display:flex; gap:1px; margin-left:8px; flex-wrap:wrap; max-width:180px;
}
.paint-color {
  width:16px; height:16px; border:1px solid #888; cursor:pointer;
}
.paint-color:hover { border-color:#fff; }
.paint-canvas-wrap { flex:1; overflow:auto; background:#808080; padding:4px; }
.paint-canvas { background:#fff; cursor:crosshair; display:block; }

/* ===== INTERNET EXPLORER ===== */
.ie-toolbar {
  display:flex; align-items:center; gap:4px; padding:4px 8px; background:#ece9d8; border-bottom:1px solid #bbb;
}
.ie-address {
  flex:1; padding:3px 6px; border:1px solid #7f9db9; font-size:11px; background:#fff;
}
.ie-go { padding:3px 10px; background:linear-gradient(180deg, #f0f0f0, #ddd); border:1px solid #999; cursor:pointer; font-size:11px; }
.ie-content { flex:1; padding:20px; overflow:auto; }
.ie-homepage { max-width:600px; margin:0 auto; }
.ie-homepage h2 { color:#003399; margin-bottom:10px; }
.ie-homepage .ie-search { display:flex; gap:4px; margin:16px 0; }
.ie-homepage input {
  flex:1; padding:4px 8px; border:1px solid #7f9db9; font-size:12px;
}

/* ===== SHUTDOWN ===== */
#shutdown-dialog { position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center; }
.shutdown-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.shutdown-box {
  position:relative; background:#ece9d8; border:2px solid #0055e5; border-radius:8px;
  width:360px; box-shadow:4px 4px 12px rgba(0,0,0,0.4); overflow:hidden;
}
.shutdown-header {
  padding:8px 12px; background:linear-gradient(180deg, #0f72e6, #0748a5);
  color:#fff; font-weight:bold; font-size:12px;
}
.shutdown-body { padding:20px; text-align:center; font-size:13px; }
.shutdown-buttons { display:flex; gap:6px; padding:10px 16px; justify-content:center; flex-wrap:wrap; }
.shutdown-buttons button {
  padding:6px 14px; background:linear-gradient(180deg, #f0f0f0, #ddd); border:1px solid #888;
  border-radius:3px; cursor:pointer; font-size:11px;
}
.shutdown-buttons button:hover { background:linear-gradient(180deg, #fff, #eee); }

#shutdown-screen {
  position:fixed; inset:0; z-index:30000;
  background:linear-gradient(180deg, #000 0%, #0a1a4a 50%, #000 100%);
  display:flex; align-items:center; justify-content:center;
}
.shutdown-text {
  color:#ff8c00; font-size:24px; text-shadow:0 0 10px #ff8c00;
  animation: blink 1.5s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ===== SELECTION ===== */
::selection { background:#316ac5; color:#fff; }