@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html,body,#root { height:100%; width:100%; overflow:hidden; }

body {
  font-family: "Pixelated MS Sans Serif", "Tahoma", "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
  -webkit-font-smoothing: none;
  cursor: default;
  user-select: none;
}

.desktop {
  position:absolute; inset:0;
  background:#008080;
  overflow:hidden;
}

.desktop.busy { cursor: wait; }

/* --- BEVEL SYSTEM --- */
.bevel-out {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #dfdfdf;
  background:#c0c0c0;
}
.bevel-in {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
  background:#c0c0c0;
}
.field {
  border:2px solid; border-color:#808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #000;
  background:#fff;
}

/* --- BUTTONS --- */
.btn98 {
  background:#c0c0c0;
  border:2px solid;
  border-color:#ffffff #000 #000 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  padding:3px 12px;
  font-family:inherit; font-size:12px;
  cursor:default; color:#000;
}
.btn98:active, .btn98.pressed {
  border-color:#000 #ffffff #ffffff #000;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
  padding:4px 11px 2px 13px;
}
.btn98:focus { outline:1px dotted #000; outline-offset:-4px; }
.btn98:disabled { color:#808080; text-shadow:1px 1px 0 #fff; }

/* --- DESKTOP ICONS --- */
.dicon {
  width:78px; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:4px; cursor:default; text-align:center;
}
.dicon .glyph { font-size:32px; line-height:1; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
.dicon .label {
  color:#fff; font-size:11px; padding:1px 2px;
  text-shadow:1px 1px 1px rgba(0,0,0,.6);
  max-width:76px; word-break:break-word;
}
.dicon.selected .label { background:#000080; color:#fff; text-shadow:none; }
.dicon.selected .glyph { filter:drop-shadow(0 0 0 #000) brightness(.85); }

/* --- WINDOW --- */
.win {
  position:absolute;
  background:#c0c0c0;
  border:2px solid;
  border-color:#dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  display:flex; flex-direction:column;
  min-width:160px;
}
.titlebar {
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff; font-weight:bold;
  padding:2px 3px 2px 5px;
  display:flex; align-items:center; gap:4px;
  cursor:default;
  height:20px;
}
.win.inactive .titlebar { background:linear-gradient(90deg,#808080,#b5b5b5); }
.titlebar .tb-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.titlebar .tb-icon { font-size:13px; }
.tb-btn {
  width:16px; height:14px; font-size:9px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding:0; font-weight:bold; font-family:"Marlett",inherit;
}
.menubar { display:flex; gap:2px; padding:1px 2px; background:#c0c0c0; }
.menubar span { padding:2px 7px; }
.menubar span:hover { background:#000080; color:#fff; }
.win-body { flex:1; overflow:auto; background:#c0c0c0; padding:0; }

/* --- TASKBAR --- */
.taskbar {
  position:absolute; bottom:0; left:0; right:0; height:34px;
  background:#c0c0c0;
  border-top:2px solid #dfdfdf;
  box-shadow: inset 0 1px 0 #fff;
  display:flex; align-items:center; gap:4px; padding:3px 4px;
  z-index:99999;
}
.start-btn {
  font-weight:bold; display:flex; align-items:center; gap:4px;
  padding:2px 8px 2px 5px; height:26px;
}
.start-btn .glass { font-size:15px; }
.tasks { flex:1; display:flex; gap:3px; overflow-x:auto; height:26px; }
.tasks::-webkit-scrollbar { height:0; }
.task-btn {
  min-width:120px; max-width:170px; height:24px; text-align:left;
  display:flex; align-items:center; gap:4px; padding:2px 6px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.tray {
  height:26px; display:flex; align-items:center; gap:6px;
  padding:0 8px;
}
.clock { padding:2px 6px; font-size:11px; }

/* --- START MENU --- */
.startmenu {
  position:absolute; bottom:34px; left:4px; width:220px;
  display:flex; z-index:99998;
  background:#c0c0c0;
  animation: rise .12s ease-out;
}
@keyframes rise { from { transform:translateY(20px); opacity:.4; } }
.startmenu .sidebar {
  width:32px;
  background:linear-gradient(180deg,#1084d0,#000080);
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:#fff; font-weight:bold; font-size:17px;
  padding:8px 4px; text-align:left; letter-spacing:1px;
}
.startmenu .items { flex:1; padding:2px; }
.smitem {
  display:flex; align-items:center; gap:8px;
  padding:5px 8px; cursor:default;
}
.smitem:hover { background:#000080; color:#fff; }
.smitem .g { font-size:18px; width:22px; text-align:center; }
.sm-sep { height:2px; margin:2px 4px;
  border-top:1px solid #808080; border-bottom:1px solid #fff; }

/* --- DIALOG --- */
.overlay {
  position:absolute; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
}
.dialog { min-width:300px; max-width:90vw; }
.dialog .body { display:flex; gap:14px; padding:18px 16px; }
.dialog .icon { font-size:34px; }
.dialog .msg { flex:1; align-self:center; line-height:1.4; }
.dialog .btns { display:flex; justify-content:center; gap:8px; padding:0 16px 16px; }

/* --- PROGRESS --- */
.progress-track { height:20px; background:#fff; padding:2px; }
.progress-blocks { height:100%; display:flex; gap:2px; overflow:hidden; }
.progress-blocks i { width:10px; background:#000080; flex:none; }

/* --- DROP ZONE --- */
.dropzone {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(360px,80vw); padding:26px;
  border:3px dashed #ffffff; background:rgba(0,0,0,.12);
  color:#fff; text-align:center; cursor:pointer;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.dropzone.over { background:rgba(255,255,255,.25); border-color:#ffff00; }
.dropzone .big { font-size:44px; margin-bottom:8px; }

/* --- BSOD --- */
.bsod {
  position:absolute; inset:0; background:#0000aa; color:#fff;
  z-index:100001; padding:40px; font-family:inherit; line-height:1.6;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.bsod h1 { background:#c0c0c0; color:#0000aa; padding:0 8px; margin-bottom:20px; }
.bsod .msg { max-width:560px; }

/* --- SHUTDOWN --- */
.shutdown {
  position:absolute; inset:0; background:#000; color:#ff8c00;
  z-index:100002; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  font-size:22px; text-align:center; padding:20px;
}

/* calc / notepad / paint */
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:6px; }
.calc-display { margin:6px; padding:4px 8px; text-align:right; font-family:monospace; font-size:18px; }
.notepad-area {
  width:100%; height:100%; border:0; resize:none; padding:4px;
  font-family:"Lucida Console","Courier New",monospace; font-size:13px;
  background:#fff;
}
.paint-tools { display:flex; gap:4px; padding:4px; flex-wrap:wrap; }
.swatch { width:18px; height:18px; cursor:default; }

.screensaver {
  position:absolute; inset:0; background:#000; z-index:100003; overflow:hidden;
}
.flylogo { position:absolute; font-size:40px; }

.about-body { padding:14px; line-height:1.6; }
.about-body a { color:#0000ee; }

.footer-link { color:#fff; text-decoration:underline; cursor:pointer; }

@media (max-width:640px){
  .dicon { width:64px; }
  body { font-size:12px; }
}