:root{
  --teal:#008080; --win-gray:#c0c0c0; --win-dark:#808080; --win-light:#ffffff; --win-shadow:#000000;
  --blue:#000080; --text:#000; --font:"MS Sans Serif", Tahoma, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);color:var(--text)}
.desktop{
  height:100%; background:var(--teal);
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
  user-select:none;
}
/* Desktop icons: absolute positioned */
.desktop-icons{position:absolute; inset:0;}
.desktop-icon{
  position:absolute;
  width:104px;
  background:transparent;
  border:0;
  padding:6px;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.desktop-icon img{width:56px;height:56px;image-rendering:pixelated}
.desktop-icon span{
  max-width:104px;
  text-align:center;
  font-size:13px;
  line-height:1.1;
  text-shadow:1px 1px 0 #000;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.desktop-icon.selected{
  outline:1px dotted #fff;
  outline-offset:2px;
}
/* PDFs: look bigger + nicer label box */
.desktop-icon.pdf img{width:60px;height:60px}
.desktop-icon.pdf span{
  background:rgba(0,0,0,0.25);
  padding:2px 4px;
  border-radius:2px;
}

/* Window */
.window{
  position:absolute;
  top:72px; left:140px;
  width:min(760px, calc(100% - 40px));
  height:min(520px, calc(100% - 120px));
  background:var(--win-gray);
  border-top:2px solid var(--win-light);
  border-left:2px solid var(--win-light);
  border-right:2px solid var(--win-shadow);
  border-bottom:2px solid var(--win-shadow);
  box-shadow:1px 1px 0 var(--win-dark);
  display:flex; flex-direction:column;
  transform-origin:top left;
}
.titlebar{
  height:28px;
  background:linear-gradient(90deg, var(--blue), #3a6ea5);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6px;
}
.titlebar-left{display:flex;align-items:center;gap:8px;font-weight:bold;font-size:13px}
.title-ico{width:16px;height:16px;image-rendering:pixelated}
.titlebar-right{display:flex;gap:4px}
.winbtn{
  width:24px;height:20px;background:var(--win-gray);
  border-top:2px solid var(--win-light);
  border-left:2px solid var(--win-light);
  border-right:2px solid var(--win-shadow);
  border-bottom:2px solid var(--win-shadow);
  font-family:var(--font); cursor:pointer;
}
.winbtn:active{
  border-top:2px solid var(--win-shadow);
  border-left:2px solid var(--win-shadow);
  border-right:2px solid var(--win-light);
  border-bottom:2px solid var(--win-light);
}
.menubar{
  height:26px;
  display:flex; gap:18px;
  padding:4px 8px;
  font-size:13px;
  border-bottom:1px solid var(--win-dark);
}
.content{flex:1;padding:8px;display:flex;flex-direction:column;gap:8px}
.pathbar{
  background:#fff;
  border-top:2px solid var(--win-dark);
  border-left:2px solid var(--win-dark);
  border-right:2px solid var(--win-light);
  border-bottom:2px solid var(--win-light);
  padding:6px 8px;
  display:flex; gap:8px;
  font-size:13px;
}
.explorer-grid{
  flex:1;
  background:#fff;
  border-top:2px solid var(--win-dark);
  border-left:2px solid var(--win-dark);
  border-right:2px solid var(--win-light);
  border-bottom:2px solid var(--win-light);
  padding:10px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-content:flex-start;
  overflow:auto;
}
.folder-icon{
  width:96px;
  border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; padding:6px;
}
.folder-icon img{width:44px;height:44px;image-rendering:pixelated}
.folder-icon span{font-size:13px;color:#000;text-align:center;line-height:1.1}

.statusbar{height:24px;border-top:1px solid var(--win-dark);padding:4px 8px;font-size:12px;display:flex;align-items:center}

/* Context menu */
.context-menu{
  position:absolute;
  min-width:240px;
  background:var(--win-gray);
  border-top:2px solid var(--win-light);
  border-left:2px solid var(--win-light);
  border-right:2px solid var(--win-shadow);
  border-bottom:2px solid var(--win-shadow);
  padding:4px;
  z-index:9999;
}
.context-menu button{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:8px 10px;
  font-family:var(--font);
  font-size:13px;
  cursor:pointer;
}
.context-menu button:hover{background:var(--blue);color:#fff}

.hidden{ display:none !important; }

/* Animations */
@keyframes winOpen{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes winClose{0%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:0}}
.window.anim-open{animation:winOpen 140ms ease-out}
.window.anim-close{animation:winClose 120ms ease-in}


/* ---- Taskbar + Start Menu (Winblows 95) ---- */
.taskbar{
  position:absolute;
  left:0; right:0; bottom:0;
  height:34px;
  background:var(--win-gray,#c0c0c0);
  border-top:2px solid var(--win-light,#fff);
  box-shadow: 0 -1px 0 var(--win-dark,#808080);
  display:flex;
  align-items:center;
  padding:4px;
  gap:6px;
  z-index: 20000;
}
.start-btn{
  height:26px;
  display:flex; align-items:center; gap:6px;
  padding:0 10px 0 8px;
  background:var(--win-gray,#c0c0c0);
  border-top:2px solid var(--win-light,#fff);
  border-left:2px solid var(--win-light,#fff);
  border-right:2px solid var(--win-shadow,#000);
  border-bottom:2px solid var(--win-shadow,#000);
  font-family:var(--font, Tahoma, Arial, sans-serif);
  cursor:pointer;
  font-weight:bold;
}
.start-btn:active, .start-btn.active{
  border-top:2px solid var(--win-shadow,#000);
  border-left:2px solid var(--win-shadow,#000);
  border-right:2px solid var(--win-light,#fff);
  border-bottom:2px solid var(--win-light,#fff);
}
.taskbar-spacer{flex:1}
.clock{
  height:26px;
  padding:0 8px;
  display:flex;align-items:center;
  background:var(--win-gray,#c0c0c0);
  border-top:2px solid var(--win-shadow,#000);
  border-left:2px solid var(--win-shadow,#000);
  border-right:2px solid var(--win-light,#fff);
  border-bottom:2px solid var(--win-light,#fff);
  font-size:12px;
  white-space:nowrap;
}

/* Start menu */
.start-menu{
  position:absolute;
  left:4px;
  bottom:34px;
  width:270px;
  background:var(--win-gray,#c0c0c0);
  border-top:2px solid var(--win-light,#fff);
  border-left:2px solid var(--win-light,#fff);
  border-right:2px solid var(--win-shadow,#000);
  border-bottom:2px solid var(--win-shadow,#000);
  z-index: 21000;
  display:flex;
}
.start-strip{
  width:34px;
  background:linear-gradient(#000080, #3a6ea5);
  display:flex;
  align-items:flex-end;
  padding:10px 6px;
  color:#fff;
  font-weight:bold;
  letter-spacing:.4px;
  writing-mode:vertical-rl;
  transform: rotate(180deg);
  user-select:none;
}
.start-items{flex:1;padding:4px}
.start-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--font, Tahoma, Arial, sans-serif);
  font-size:13px;
  text-align:left;
}
.start-item img{width:20px;height:20px;image-rendering:pixelated}
.start-item:hover{background:#000080;color:#fff}
.menu-sep{height:1px;background:var(--win-dark,#808080);box-shadow:0 1px 0 var(--win-light,#fff);margin:4px 4px}

/* Start menu animations */
@keyframes menuIn{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes menuOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(8px);opacity:0}}
.start-menu.anim-in{animation:menuIn 120ms ease-out}
.start-menu.anim-out{animation:menuOut 100ms ease-in}


.window{
  position:absolute;
  left:80px;
  top:80px;
  z-index:1000;
}

.toolbar{ display:flex; gap:6px; padding:6px; }
.toolbtn{
  font-size:12px;
  padding:2px 10px;
  background: var(--win-face,#c0c0c0);
  border:2px solid var(--win-shadow,#000);
  border-right-color: var(--win-light,#fff);
  border-bottom-color: var(--win-light,#fff);
  cursor:pointer;
}
.toolbtn:active{
  border-right-color: var(--win-shadow,#000);
  border-bottom-color: var(--win-shadow,#000);
  border-left-color: var(--win-light,#fff);
  border-top-color: var(--win-light,#fff);
}


/* Explorer grid visibility fix */
.explorer-grid{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  padding:8px;
  min-height:160px;
  background:#fff;
}
.explorer-grid .folder-icon{
  position:relative;
  width:88px;
  height:auto;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  color:#000;
  cursor:default;
}
.explorer-grid .folder-icon img{
  width:32px;
  height:32px;
  image-rendering: pixelated;
}
.explorer-grid .folder-icon span{
  margin-top:4px;
  font-size:12px;
  color:#000;
  text-align:center;
  word-break:break-word;
}

/* Explorer grid visibility fix v2 (force override desktop icon styles) */
#projectsGrid.explorer-grid, #videosGrid.explorer-grid, .explorer-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  gap:8px !important;
  padding:8px !important;
  min-height:220px !important;
  background:#fff !important;
  position:relative !important;
}
.explorer-grid .folder-icon{
  position:relative !important;
  width:96px !important;
  height:auto !important;
  border:none !important;
  background:transparent !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  cursor:default !important;
  padding:4px !important;
}
.explorer-grid .folder-icon img{
  width:32px !important;
  height:32px !important;
  image-rendering: pixelated;
}
.explorer-grid .folder-icon span{
  margin-top:4px !important;
  font-size:12px !important;
  color:#000 !important;
  text-align:center !important;
  word-break:break-word !important;
}

#startMenu{ pointer-events:auto; }

/* Explorer items (separate from desktop icons) */
.explorer-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  gap:10px !important;
  padding:10px !important;
  min-height:240px !important;
  background:#fff !important;
  position:relative !important;
}
.explorer-item{
  width:110px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:transparent;
  border:none;
  padding:4px;
  cursor:pointer;
  color:#000;
}
.explorer-item img{
  width:32px;
  height:32px;
  image-rendering: pixelated;
}
.explorer-item .label{
  margin-top:4px;
  font-size:12px;
  color:#000;
  text-align:center;
  word-break:break-word;
}