#startmenu {
  position: fixed;
  bottom: calc(var(--taskbar-h) + .5px);
  left: 0;
  width: 480px;
  height: 530px;
  background: var(--xp-blue);
  border: 1px solid rgba(0,0,0,.3);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,.4), 2px 4px 10px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-startmenu);
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease, visibility 0s .1s;
}
#startmenu.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .1s ease;
}

.sm-header {
  height: 72px;
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(180deg,
    #1868ce 0, #0e60cb 12%, #0e60cb 20%, #1164cf 32%,
    #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%,
    #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb);
  display: flex;
  align-items: center;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 -2px 3px rgba(10,36,106,.4);
}
.sm-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,140,0,.1) 0, rgba(255,165,0,.9) 30%,
    rgba(255,165,0,.9) 70%, rgba(255,140,0,.1));
  box-shadow: 0 1px 2px rgba(255,255,255,.3);
}
.sm-avatar {
  width: 54px;
  height: 54px;
  margin: 9px 12px 9px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,95,184,.6), inset 0 0 2px 1px rgba(255,255,255,.35);
  object-fit: cover;
}
.sm-username {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}

.sm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  box-shadow: inset 0 6px 10px -6px rgba(0,0,0,.3);
}
.sm-left {
  width: 52%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: inset -2px 0 3px -1px rgba(0,0,0,.15), inset 0 3px 4px -3px rgba(0,0,0,.2);
}
.sm-right {
  width: 48%;
  background: #d2e5fa;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #a6bbd6;
  box-shadow: inset 2px 0 3px -1px rgba(255,255,255,.7), inset 0 3px 4px -3px rgba(0,0,0,.15);
}

.sm-items { list-style: none; display: flex; flex-direction: column; flex: 1; }

.sm-divider-line { height: 1px; list-style: none; flex-shrink: 0; }
.sm-divider-line .divider-inner {
  background: linear-gradient(90deg, transparent, #d2d2d2 50%, transparent);
  height: 1px;
}
.sm-right .sm-divider-line .divider-inner {
  background: linear-gradient(90deg, transparent, #94bddf 50%, transparent);
}

.sm-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color .05s;
}
.sm-left .sm-item  { flex-shrink: 0; min-height: 52px; max-height: 62px; }
.sm-right .sm-item { height: 50px; min-height: 50px; max-height: 50px; padding: 8px 10px 8px 12px; }

.sm-item:hover { background: #2f71cd; box-shadow: inset 0 0 5px rgba(0,0,0,.2); }
.sm-item:hover .si-title,
.sm-item:hover .si-desc { color: #fff !important; }

.sm-left .sm-item img  { width: 40px; height: 40px; margin-right: 10px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.3)); }
.sm-right .sm-item img { width: 34px; height: 34px; margin-right: 10px; margin-left: 1px; }

.si-content { display: flex; flex-direction: column; justify-content: center; }
.si-title   { font-size: 15px; font-weight: 700; color: #000; }
.sm-right .si-title { font-size: 14px; }
.si-desc    { font-size: 12px; color: #777; line-height: 1.2; margin-top: 2px; }
.sm-item.clicked { background: #1e5fa9; box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }

.sm-all-programs {
  height: 35px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.sm-all-programs:hover { background: #2f71cd; color: #fff; }
.sm-all-programs img   { height: 18px; width: 18px; margin-left: 10px; }
.sm-all-programs span  { margin-right: 10px; }

.sm-footer {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  border-top: 1px solid rgba(0,0,0,.3);
}
.sm-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    #428ee9 0, #3786e5 10%, #3482e3 21%, #297ae0 35%,
    #2476dc 40%, #1e70d9 46%, #1b6cd3 53%, #1667cf 67%,
    #1164cf 68%, #0e60cb 80%, #0e60cb 88%, #1868ce);
}
.sm-footer-btns {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 2px;
}
.sm-footer-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0 6px;
  padding: 0;
  color: #fff;
  font-size: 16px;
  font-family: Tahoma, Arial, sans-serif;
  background: transparent;
  border: none;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.sm-footer-btn:hover img { filter: brightness(1.2); }
.sm-footer-btn img { width: 32px; height: 32px; border-radius: 3px; transition: filter .1s; }
.sm-footer-btn span { padding: 0 8px; }

#logoff-dialog {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(1px);
}
#logoff-dialog.visible { display: flex; }

.logoff-box {
  width: 350px;
  background: var(--xp-bg);
  border: 1px solid #2b2b2b;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
}
.logoff-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 16px;
  background: linear-gradient(90deg, #002a8c, #0039a9 50%, #002a8c);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.logoff-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 25%, #bad7f8 45%, #bad7f8 55%, transparent 75%);
}
.logoff-header-icon { height: 36px; width: 36px; }
.logoff-btns-area {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 36px 0;
  background: linear-gradient(90deg, #587cdb, #688ceb 50%, #587cdb);
}
.logoff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  width: 80px;
  text-align: center;
}
.logoff-btn img {
  height: 40px;
  width: 40px;
  margin-bottom: 6px;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4));
  transition: filter .15s;
}
.logoff-btn:hover img { filter: brightness(1.1) drop-shadow(1px 1px 2px rgba(0,0,0,.5)); }
.logoff-btn span { font-size: 13.5px; text-shadow: 1px 1px 1px rgba(0,0,0,.4); }
.logoff-footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  background: linear-gradient(90deg, #002a8c, #0039a9 50%, #002a8c);
}
.logoff-cancel {
  padding: 2px 12px;
  background: #f0f0f0;
  color: #222;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  border: 1.5px solid;
  border-color: #fff #6d6d6d #6d6d6d #fff;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #6d6d6d;
}
.logoff-cancel:hover  { background: #fff; border-color: #fff #b0b0b0 #b0b0b0 #fff; }
.logoff-cancel:active { background: #d4d0c8; border-color: #6d6d6d #fff #fff #6d6d6d; }