/* =========================================================
   HERO WORKSPACE COMPACT V4
   Reduce height + improve visual balance
   ========================================================= */

.hero-workspace-wrap{
  min-height: 440px !important;
  align-items: center !important;
}

.developer-workspace{
  max-width: 590px !important;
  border-radius: 18px !important;
}

/* tighter top bar */
.workspace-topbar{
  height: 38px !important;
  padding: 0 12px !important;
}

.workspace-title{
  font-size: 8px !important;
}

.workspace-status{
  font-size: 7px !important;
  padding: 4px 7px !important;
}

/* compact tabs */
.workspace-tabs{
  padding: 6px !important;
  gap: 2px !important;
}

.workspace-tab{
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: 8px !important;
  border-radius: 7px !important;
}

.workspace-tab i{
  font-size: 12px !important;
}

/* lower editor height */
.workspace-screen{
  min-height: 285px !important;
}

.workspace-panel{
  min-height: 285px !important;
}

.screen-filebar{
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 8px !important;
}

.workspace-panel pre{
  padding: 18px 18px 20px !important;
  font-size: 10px !important;
  line-height: 1.58 !important;
  max-height: 245px;
  overflow: auto;
}

/* design panels also more compact */
.design-canvas{
  min-height: 245px !important;
}

.figma-canvas,
.photoshop-canvas,
.photopea-canvas,
.canva-canvas{
  padding: 11px !important;
  gap: 9px !important;
}

/* footer smaller */
.workspace-footer{
  height: 28px !important;
  padding: 0 10px !important;
  gap: 11px !important;
  font-size: 7px !important;
}

/* floating HUD cards reduced */
.workspace-float-card{
  min-width: 62px !important;
  min-height: 40px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
}

.workspace-float-card strong{
  font-size: 12px !important;
}

.workspace-float-card span{
  font-size: 6px !important;
}

.wfc-one{
  top: 72px !important;
}

.wfc-two{
  top: 110px !important;
}

/* softer glow so compact box looks cleaner */
.workspace-glow{
  width: 300px !important;
  height: 300px !important;
  filter: blur(48px) !important;
}

/* laptop */
@media (max-width: 1199px){
  .hero-workspace-wrap{
    min-height: 415px !important;
  }

  .developer-workspace{
    max-width: 550px !important;
  }

  .workspace-screen,
  .workspace-panel{
    min-height: 270px !important;
  }

  .workspace-panel pre{
    font-size: 9.5px !important;
  }
}

/* tablet */
@media (max-width: 991px){
  .hero-workspace-wrap{
    min-height: 390px !important;
  }

  .developer-workspace{
    max-width: 680px !important;
  }

  .workspace-screen,
  .workspace-panel{
    min-height: 255px !important;
  }

  .design-canvas{
    min-height: 220px !important;
  }
}

/* mobile */
@media (max-width: 650px){
  .hero-workspace-wrap{
    min-height: auto !important;
  }

  .developer-workspace{
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  .workspace-topbar{
    height: 36px !important;
  }

  .workspace-tabs{
    padding: 5px !important;
  }

  .workspace-tab{
    min-height: 36px !important;
    padding: 6px 8px !important;
  }

  .workspace-screen,
  .workspace-panel{
    min-height: 235px !important;
  }

  .screen-filebar{
    height: 30px !important;
  }

  .workspace-panel pre{
    padding: 15px 12px !important;
    font-size: 8.8px !important;
    line-height: 1.55 !important;
    max-height: 205px;
  }

  .design-canvas{
    min-height: 205px !important;
  }

  .workspace-footer{
    height: 26px !important;
  }
}