/* =========================================================
   PREMIUM HERO DEVELOPER WORKSPACE V2
   ========================================================= */

.hero-workspace-wrap{
  --workspace-accent:#2ae2ff;
  --workspace-accent-2:#5278ff;
  isolation:isolate;
}

.hero-workspace-wrap::before{
  content:"";
  position:absolute;
  width:84%;
  height:74%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--workspace-accent) 22%,transparent),transparent 55%),
    radial-gradient(circle at 70% 68%,color-mix(in srgb,var(--workspace-accent-2) 18%,transparent),transparent 58%);
  filter:blur(42px);
  opacity:.9;
  z-index:-1;
  animation:workspaceAura 7s ease-in-out infinite alternate;
}

@keyframes workspaceAura{
  to{transform:scale(1.08) translateY(-10px);opacity:.65}
}

.developer-workspace{
  position:relative;
  transform-style:preserve-3d;
  transform:perspective(1100px) rotateX(0deg) rotateY(0deg);
  transition:
    transform .18s ease-out,
    border-color .35s ease,
    box-shadow .35s ease;
  border-color:color-mix(in srgb,var(--workspace-accent) 38%,rgba(255,255,255,.08)) !important;
  box-shadow:
    0 35px 90px rgba(0,0,0,.38),
    0 0 36px color-mix(in srgb,var(--workspace-accent) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.developer-workspace::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    120deg,
    transparent 4%,
    color-mix(in srgb,var(--workspace-accent) 78%,white 10%) 28%,
    color-mix(in srgb,var(--workspace-accent-2) 70%,white 8%) 52%,
    transparent 75%
  );
  background-size:220% 220%;
  animation:workspaceBorderFlow 6s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:5;
}

@keyframes workspaceBorderFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.developer-workspace::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 15%,rgba(255,255,255,.035) 38%,transparent 58%);
  transform:translateX(-120%);
  animation:workspaceGlassShine 7s ease-in-out infinite;
}

@keyframes workspaceGlassShine{
  0%,65%{transform:translateX(-120%)}
  82%,100%{transform:translateX(120%)}
}

.workspace-topbar{
  position:relative;
  z-index:4;
}

.workspace-topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--workspace-accent),transparent);
  opacity:.35;
}

.workspace-title{
  color:#a4c7e2 !important;
}

.workspace-title i{
  color:var(--workspace-accent) !important;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--workspace-accent) 70%,transparent));
}

.workspace-status{
  padding:5px 8px;
  border:1px solid rgba(61,229,170,.12);
  border-radius:999px;
  background:rgba(61,229,170,.04);
}

.workspace-tabs{
  position:relative;
  z-index:4;
  scrollbar-color:rgba(75,151,205,.28) transparent;
}

.workspace-tab{
  position:relative;
  overflow:hidden;
  transition:
    color .25s ease,
    background .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

.workspace-tab::before{
  content:"";
  position:absolute;
  inset:auto 15% 0;
  height:2px;
  border-radius:2px;
  background:var(--workspace-accent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
  box-shadow:0 0 8px var(--workspace-accent);
}

.workspace-tab:hover{
  transform:translateY(-2px);
}

.workspace-tab.active{
  box-shadow:none !important;
  border-color:color-mix(in srgb,var(--workspace-accent) 32%,transparent) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--workspace-accent) 10%,transparent),
      color-mix(in srgb,var(--workspace-accent-2) 9%,transparent)
    ) !important;
}

.workspace-tab.active::before{
  transform:scaleX(1);
}

.workspace-tab.active i{
  color:var(--workspace-accent);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--workspace-accent) 65%,transparent));
}

.workspace-auto-progress{
  height:2px;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.025);
  z-index:4;
}

.workspace-auto-progress span{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0;
  border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,var(--workspace-accent),var(--workspace-accent-2));
  box-shadow:0 0 8px color-mix(in srgb,var(--workspace-accent) 75%,transparent);
}

.workspace-auto-progress span.running{
  animation:workspaceProgress 3.2s linear forwards;
}

@keyframes workspaceProgress{
  from{width:0}
  to{width:100%}
}

.workspace-screen{
  position:relative;
  overflow:hidden;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.025);
  background:
    linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px),
    radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--workspace-accent) 6%,transparent),transparent 45%),
    #041124 !important;
}

.workspace-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 20%,transparent 80%,rgba(0,0,0,.10));
  z-index:3;
}

.workspace-screen-spotlight{
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:.0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--workspace-accent) 13%,transparent),transparent 68%);
  filter:blur(4px);
  transition:opacity .2s ease;
}

.workspace-screen:hover .workspace-screen-spotlight{
  opacity:1;
}

.workspace-scanline{
  position:absolute;
  left:0;
  right:0;
  top:-12%;
  height:45px;
  pointer-events:none;
  z-index:4;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--workspace-accent) 7%,transparent),transparent);
  animation:workspaceScan 5.6s linear infinite;
}

@keyframes workspaceScan{
  to{transform:translateY(460px)}
}

.workspace-panel{
  position:relative;
  z-index:2;
}

.workspace-panel.active{
  animation:workspacePremiumPanelIn .42s cubic-bezier(.2,.75,.2,1);
}

@keyframes workspacePremiumPanelIn{
  from{opacity:0;transform:translateY(9px) scale(.988);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}

.screen-filebar{
  position:relative;
  z-index:2;
  background:rgba(2,12,28,.46);
}

.screen-filebar i{
  color:var(--workspace-accent) !important;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--workspace-accent) 55%,transparent));
}

.workspace-panel pre{
  position:relative;
  z-index:2;
  text-shadow:0 0 12px rgba(105,196,255,.025);
}

/* Animated code caret */
.workspace-panel.active pre::after{
  content:"";
  display:inline-block;
  width:6px;
  height:12px;
  margin-left:3px;
  vertical-align:-2px;
  background:var(--workspace-accent);
  opacity:.85;
  box-shadow:0 0 8px var(--workspace-accent);
  animation:workspaceCaret .85s step-end infinite;
}

.design-panel.active pre::after{
  display:none;
}

@keyframes workspaceCaret{
  50%{opacity:0}
}

.workspace-footer{
  position:relative;
  z-index:4;
}

.workspace-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:36%;
  height:1px;
  background:linear-gradient(90deg,var(--workspace-accent),transparent);
  opacity:.4;
}

/* Floating mini HUD */
.workspace-float-card{
  position:absolute;
  z-index:8;
  min-width:70px;
  min-height:48px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--workspace-accent) 20%,rgba(255,255,255,.06));
  background:rgba(4,20,42,.76);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  gap:7px;
  pointer-events:none;
  animation:workspaceHudFloat 4.5s ease-in-out infinite;
}

.workspace-float-card strong{
  font-size:14px;
  color:#dcf7ff;
}

.workspace-float-card span{
  font-size:7px;
  letter-spacing:1px;
  color:#6f9cbc;
}

.workspace-float-card i{
  color:var(--workspace-accent);
}

.wfc-one{
  left:-12px;
  top:84px;
}

.wfc-two{
  right:-16px;
  top:132px;
  animation-delay:.8s;
}

.wfc-three{
  right:10px;
  bottom:62px;
  animation-delay:1.6s;
}

@keyframes workspaceHudFloat{
  50%{transform:translateY(-7px)}
}

/* Tab-specific design accents are still driven by JS custom properties */

@media(max-width:1100px){
  .workspace-float-card{transform:scale(.92)}
  .wfc-one{left:-5px}
  .wfc-two{right:-6px}
}

@media(max-width:991px){
  .workspace-float-card{
    display:none;
  }
}

@media(max-width:650px){
  .developer-workspace{
    transform:none!important;
  }

  .developer-workspace::before,
  .developer-workspace::after,
  .workspace-scanline{
    animation-duration:8s;
  }

  .workspace-tab:hover{
    transform:none;
  }

  .workspace-screen-spotlight{
    display:none;
  }
}

@media(hover:none),(pointer:coarse){
  .developer-workspace{
    transform:none!important;
  }

  .workspace-screen-spotlight{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .developer-workspace::before,
  .developer-workspace::after,
  .workspace-scanline,
  .workspace-float-card,
  .workspace-panel.active,
  .workspace-panel.active pre::after,
  .hero-workspace-wrap::before{
    animation:none!important;
  }

  .developer-workspace{
    transform:none!important;
  }

  .workspace-auto-progress span{
    animation:none!important;
    width:100%;
  }
}