/* Desktop (index) */
.desktop{
  position: relative;
  width: 100%;
  height: 100vh;
overflow:hidden;
}

.desktop-header{
  position: absolute;
  top: 18px;
  left: 18px;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.desktop-header img{
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.50));
}
.desktop-header .brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.desktop-header .brand strong{
  font-size: 16px;
  letter-spacing: .2px;
}
.desktop-header .brand span{
  font-size: 13px;
  color: var(--muted);
}

.hint{
  position:absolute;
  top: 92px;
  left: 18px;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  line-height: 1.45;
  backdrop-filter: blur(8px);
  z-index: 5;
}

.desktop-icons{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Folder icons */
.icon{
  position:absolute;
  width: 110px;
  text-align:center;
  user-select:none;
  cursor: default;
  padding: 10px 8px 8px;
  border-radius: 16px;
  transition: background .12s ease, outline .12s ease;
  touch-action: none; /* better dragging on touch devices */
}
.icon:hover{ background: rgba(255,255,255,0.06); }
.icon.selected{
  background: rgba(0,183,198,0.10);
  outline: 1px solid rgba(0,183,198,0.35);
}
.icon img{
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55));
  pointer-events:none;
}
.icon span{
  display:block;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* right click menu */
.context{
  position: fixed;
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(18,20,26,0.92);
  box-shadow: 0 18px 55px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 999;
}
.context button{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.92);
  padding: 10px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 13px;
}
.context button:hover{ background: rgba(255,255,255,0.08); }
.context .sep{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 6px 0;
}

/* Mobile: grid layout (no absolute positioning, no “lost icons”) */
@media (max-width: 760px){
  .desktop{
    height: auto;
    min-height: 100vh;
overflow:auto;
    padding-bottom: 16px;
}

  .desktop-header{
    position: sticky;
    top: 12px;
    left: 12px;
    margin: 12px;
  }

  .hint{
    position: relative;
    top: auto;
    left: auto;
    margin: 0 12px 10px;
  }

  .desktop-icons{
    height: auto;
    padding: 0 12px 20px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .icon{
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    touch-action: pan-y;
  }
}