:root{
  --taskbar-height:58px;
  --bg:#1e90ff;
}
*{box-sizing:border-box}
html,body,#desktop{height:100%;margin:0;font-family:Segoe UI, system-ui, -apple-system, "Helvetica Neue", Arial}
body{background:
  linear-gradient(180deg, rgba(10,30,60,0.18), rgba(0,0,0,0.2)),
  url('wallpaper.webp') center/cover no-repeat;
  overflow:hidden;
  position:relative;
  -webkit-user-select:none;
  user-select:none;
}

/* startup splash sits over desktop initially (fullscreen overlay) */
#startup{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:9999;
  pointer-events:none;
  background-color:#000;
  /* give the startup GIF more time to finish before fading out */
  animation:fadeOut 1s ease 4s forwards;
  display:block;
}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* icons */
#icons{position:absolute;left:28px;top:20px;display:flex;flex-direction:column;gap:18px;z-index:10}
.icon{width:72px;text-align:center;color:#fff;font-size:12px;cursor:pointer;transform:translateZ(0)}
.icon img{width:64px;height:64px;display:block;margin:0 auto;border-radius:6px}
.label{margin-top:6px;text-shadow:0 1px 0 rgba(0,0,0,0.6)}

/* windows layer */
#windows-layer{position:absolute;inset:0;pointer-events:none;z-index:30}

/* app window */
.app-window{
  width:320px;height:220px;
  /* use the program window asset as the full-window background */
  background:
    linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.12)),
    url('program_windowed.png') center/cover no-repeat;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;pointer-events:auto;
  display:flex;flex-direction:column;border:1px solid rgba(0,0,0,0.12);
  color:#222;
}
.titlebar{
  height:36px;
  /* remove solid header so the underlying program_windowed.png is fully visible */
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  font-weight:600;
  /* keep subtle shadow only on non-black text when needed (titles are black now) */
  text-shadow: none;
}
.title{
  font-size:13px;
  color:#000; /* program name in windows title set to black */
}
.controls button{background:transparent;border:0;padding:4px 6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.controls button img{width:18px;height:18px;display:block}
.content{flex:1;padding:10px;overflow:auto;background:transparent}

/* taskbar */
#taskbar{
  position:absolute;left:0;right:0;bottom:0;height:var(--taskbar-height);display:flex;align-items:center;padding:6px 8px;gap:12px;
  /* use the full taskbar image without cropping */
  background-image: url('taskbar.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  z-index:50;backdrop-filter: blur(6px)
}
#start-wrapper{position:relative}
#start-button{width:48px;height:48px;border-radius:999px;border:0;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
#start-button img{width:40px;height:40px}
#start-button.active img{content:url('start_button_active.png')}
#start-panel{
  position:absolute;
  left:0;
  /* align the panel to sit above the taskbar area */
  bottom:var(--taskbar-height);
  /* match the PNG asset size so the image fills the panel exactly */
  width:360px;
  height:420px;
  border-radius:6px;
  overflow:visible; /* allow the full PNG to overflow without clipping */
  box-shadow:0 14px 40px rgba(0,0,0,0.5);
  transform:translateY(6px) scale(0.98);
  opacity:0;
  visibility:hidden;
  transition:all 160ms ease;
  pointer-events:none;
  z-index:60;
  background: transparent;
}

/* the full PNG sits inside the panel and fills it */
#start-panel-img{
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  z-index:59; /* behind the interactive overlay */
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:left top;
  opacity:1;
}

/* overlay that places interactive elements exactly over the image */
.start-panel-overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:61;
  pointer-events:auto;
  display:block;
  /* allow spacing for positioned elements */
}

/* user avatar placed to match asset (top-left area inside the white rectangle) */
.start-user{
  /* nudged avatar a bit further to the right so it aligns better with the blue pane */
  position:absolute;
  right:54px;
  top:48px;
  left:auto;
  width:64px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:62;
  pointer-events:auto;
  flex-direction:column;
  text-align:center;
}
.start-user img{
  width:56px;
  height:56px;
  border-radius:8px;
  display:block;
  object-fit:cover;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.start-user-name{
  color:#fff; /* white text to read on blue background */
  font-weight:600;
  font-size:13px;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

/* search bar positioned to align with the search field in the PNG (below the user area) */
.start-search{
  /* place the search bar level with the shutdown button and to its left — shifted slightly right and widened */
  position:absolute;
  left:auto;
  right:140px; /* nudged slightly to the right to better align with the image's search area */
  bottom:18px; /* same vertical position as shutdown */
  top:auto;
  width:200px; /* slightly narrower to fit the image area */
  z-index:62;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.start-search input{
  width:100%;
  height:20px; /* slightly reduced height to better fit inside the image's search field */
  padding:5px 10px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  font-size:14px;
  color:#222;
  outline:none;
}

/* adjust tiles down to account for the new search placement */
.start-tiles{
  position:absolute;
  left:18px;
  top:86px;
  width:200px;
  display:block;
  gap:8px;
}

/* use absolute placement for tiles to match image layout */
.start-tiles{
  position:absolute;
  /* adjusted to snugly fit inside the white content area of the PNG */
  left:18px;
  top:86px;
  width:200px;
  display:block;
  gap:8px;
}

/* individual tile look remains but positioned in a column */
.tile{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:6px;
  border:0;
  background:rgba(255,255,255,0.9);
  cursor:pointer;
  margin-bottom:8px;
  width:196px;
  text-align:left;
}
.tile img{width:24px;height:24px}

/* place a separate quick-links column if needed (mirrors image) */
.start-quick{
  position:absolute;
  right:18px;
  top:86px;
  width:104px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.start-quick button{padding:8px;border-radius:6px;border:0;background:rgba(255,255,255,0.9);text-align:left}

/* shutdown button positioned to match the image (bottom-right area) */
.start-footer{
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  gap:8px;
}
.start-footer button{padding:10px 14px;border-radius:6px;border:0;background:#e74c3c;color:#fff;cursor:pointer}

/* make open state visible and interactive */
#start-panel.open{transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto}

/* tray */
#tray{margin-left:auto;display:flex;align-items:center;gap:10px;color:#fff}
.tray-item{padding:6px 10px;border-radius:4px;background:rgba(255,255,255,0.06);font-size:12px}
.time{min-width:56px;text-align:center}
.loading{width:28px;height:28px;opacity:0.9}

/* small responsive rules to ensure one-screen fit on mobile */
@media (max-height:640px){
  #start-menu{height:320px}
  .app-window{width:300px;height:200px}
}

/* Segoe UI font for welcome text */
@font-face{
  font-family: 'Segoe UI Local';
  src: url('/Segoe UI.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Welcome and Shutdown screen overlays (use logon_background.jpg) */
#welcome-screen,
#shutdown-screen{
  position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background: url('logon_background.jpg') center/cover no-repeat;
  pointer-events:auto;
}
#welcome-screen[aria-hidden="true"],
#shutdown-screen[aria-hidden="true"]{display:none}

/* inner layout: loading icon left of text */
.welcome-inner{display:flex;align-items:center;gap:18px;background:rgba(0,0,0,0.18);padding:18px 22px;border-radius:10px}
.welcome-loading{width:56px;height:56px;border-radius:8px}
.welcome-text{color:#fff;font-family:'Segoe UI Local', 'Segoe UI', system-ui, -apple-system, sans-serif;text-shadow:0 1px 0 rgba(0,0,0,0.6)}
.welcome-title{font-size:28px;font-weight:700}
.welcome-sub{font-size:14px;opacity:0.9;margin-top:4px}

/* shutdown-specific adjustments */
.shutting-down{background:rgba(0,0,0,0); /* make inner background transparent per earlier requests */ }
.shutting-title{font-size:28px;font-weight:700}

/* bottom branding image anchored to bottom center */
.welcome-bottom{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);height:40px;opacity:0.95}