#taskbar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;

  width:calc(100% - 32px);
  max-width:1000px;

  height:58px;
  z-index:40;

  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;

  background:rgba(15,15,22,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;

  backdrop-filter:blur(24px);

  box-shadow:
    0 12px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.02);
}


#start-btn{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px;
  border:none; border-radius:10px; background:var(--grad); color:#fff; cursor:pointer;
  font-weight:600; font-size:13px;
}
#start-btn:active{opacity:.85;}
.start-mark{font-family:var(--font-mono); font-size:12px;}

#taskbar-apps{flex:1; display:flex; gap:6px; overflow-x:auto; height:38px; align-items:center;}
.taskbar-app{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid transparent; color:var(--text); font-size:12px;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.taskbar-app.active{
  border-color:rgba(168,85,247,.45);
  background:rgba(168,85,247,.12);
  box-shadow:
    0 0 20px rgba(168,85,247,.15);
}

#tray{display:flex; align-items:center; gap:12px; flex-shrink:0;}
#tray-notif{
  background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer;
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
#tray-notif:active{background:var(--surface-2);}
#tray-clock{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; font-family:var(--font-mono); cursor:default;}
#tray-time{font-size:13px; font-weight:600;}
#tray-date{font-size:10px; color:var(--text-muted);}

/* ===================== START MENU ===================== */
#start-menu{
  position:absolute;
  left:16px;
  bottom:82px;
  width:340px;
  z-index:41;

  background:rgba(18,18,27,.78);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.5),
    0 0 40px rgba(123,47,247,.08);

  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);

  overflow:hidden;
  animation:startIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes startIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.start-menu-header{
  display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border);
}
.start-menu-search{
  display:flex;
  align-items:center;
  gap:9px;

  margin:10px 12px;
  height:40px;
  padding:0 12px;

  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.start-menu-search > span{
  color:var(--text-muted);
  font-size:20px;
  line-height:1;
}

.start-menu-search input{
  width:100%;
  height:100%;

  background:none;
  border:none;
  outline:none;

  color:var(--text);
  font-size:12.5px;
}

.start-menu-search input::placeholder{
  color:var(--text-muted);
}

.start-menu-search:focus-within{
  background:rgba(255,255,255,.075);
  border-color:rgba(168,85,247,.45);

  box-shadow:
    0 0 0 3px rgba(168,85,247,.08);
}
.start-menu-section-title{
  padding:4px 16px 6px;

  color:var(--text-muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.user-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.user-meta{overflow:hidden;}
.user-name{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-email{font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.start-menu-apps{
  max-height:300px;
  overflow-y:auto;
  padding:6px 8px 10px;

  scrollbar-width:thin;
}
.sm-app{
  display:flex;
  align-items:center;
  gap:11px;

  padding:9px 8px;
  border-radius:11px;

  cursor:pointer;
  font-size:13px;

  transition:
    background .15s ease,
    transform .15s ease;
}

.sm-app:hover{
  background:rgba(255,255,255,.06);
  transform:translateX(2px);
}
.sm-app:active{background:var(--surface-2);}
.sm-app .icon-glyph{
  width:30px; height:30px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}

.start-menu-footer{display:flex; border-top:1px solid var(--border);}
.start-menu-footer button{
  flex:1; background:none; border:none; color:var(--text-muted); padding:12px; font-size:12.5px; cursor:pointer;
}
.start-menu-footer button:active{background:var(--surface-2); color:var(--text);}
#btn-logout:active{color:var(--crimson);}

.taskbar-app{
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.taskbar-app:hover{
  transform:translateY(-2px);
}


/* ===================== MOBILE MODE ===================== */
@media (max-width:600px){

  #taskbar{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    transform:none;

    width:auto;
    max-width:none;

    height:58px;
    min-height:58px;

    display:flex;
    align-items:center;
    gap:5px;
    padding:7px;

    z-index:100;
    border-radius:16px;
  }

  #start-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 48px;
    width:48px;
    min-width:48px;

    height:44px;
    min-height:44px;

    padding:0;
    border-radius:12px;
  }

  #start-btn .start-label{
    display:none;
  }

  #start-btn .start-mark{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #taskbar-apps{
    flex:1;
    min-width:0;
    height:44px;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .taskbar-app{
    min-width:42px;
    width:42px;
    height:42px;
    border-radius:11px;
    flex-shrink:0;
  }

  #tray{
    gap:3px;
    flex-shrink:0;
  }

  #tray button,
  #tray-clock{
    height:42px;
  }

  #tray-clock{
    min-width:48px;
    padding:0 7px;
  }

  #tray-time{
    font-size:10px;
  }

  /* Desktop icons */
  #desktop-icons{
    top:14px;
    left:10px;
    right:10px;
    max-height:none;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    align-content:start;
  }

  .desktop-icon{
    width:auto;
    min-width:0;
    padding:7px 3px;
  }

  .desktop-icon .icon-glyph{
    width:48px;
    height:48px;
  }

  .desktop-icon .icon-label{
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* System widget */
  #desktop-widgets{
    top:auto;
    right:10px;
    bottom:76px;
    left:10px;
  }

  .system-widget{
    width:auto;
    max-width:none;
  }

  /* Start menu */
  #start-menu{
    left:8px;
    right:8px;
    bottom:74px;
    width:auto;
    max-height:calc(100vh - 90px);
    border-radius:18px;
  }

  .start-menu-apps{
    grid-template-columns:repeat(3,1fr);
  }

  /* Windows */
  #window-layer{
    bottom:72px;
  }

  .os-window{
    left:6px !important;
    top:6px !important;
    width:calc(100% - 12px) !important;
    height:calc(100% - 84px) !important;
    min-width:0;
    min-height:0;
    border-radius:16px;
  }

  .win-titlebar{
    height:44px;
  }

}