/* =========================================================
   HERO TABBED DEVELOPER WORKSPACE
   ========================================================= */

.hero-workspace-wrap{
  min-width:0;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.workspace-glow{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(42,226,255,.18),rgba(82,120,255,.10),transparent 68%);
  filter:blur(55px);
  pointer-events:none;
}

.developer-workspace{
  width:100%;
  max-width:610px;
  min-width:0;
  overflow:hidden;
  position:relative;
  background:rgba(3,14,31,.82);
  border:1px solid rgba(91,184,255,.23);
  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 0 45px rgba(42,170,255,.06);
}

.workspace-topbar{
  height:44px;
  padding:0 14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(1,10,23,.55);
}

.workspace-window-dots{
  display:flex;
  gap:6px;
}

.workspace-window-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#435a76;
}

.workspace-window-dots span:nth-child(1){background:#ff6b73}
.workspace-window-dots span:nth-child(2){background:#ffbd54}
.workspace-window-dots span:nth-child(3){background:#31d49a}

.workspace-title{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8fb1cf;
  font:9px "JetBrains Mono",monospace;
}

.workspace-title i{color:#5dd7ff}

.workspace-status{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:5px;
  color:#6d8baa;
  font-size:8px;
  font-weight:800;
}

.workspace-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3de5aa;
  box-shadow:0 0 10px rgba(61,229,170,.75);
}

.workspace-tabs{
  display:flex;
  gap:2px;
  padding:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(4,17,35,.72);
}

.workspace-tab{
  flex:0 0 auto;
  min-height:38px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#6786a6;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  font-weight:700;
  transition:.25s;
}

.workspace-tab i{
  font-size:13px;
}

.workspace-tab:hover{
  color:#c7e8ff;
  background:rgba(255,255,255,.03);
}

.workspace-tab.active{
  color:#e6f7ff;
  border-color:rgba(42,226,255,.22);
  background:linear-gradient(135deg,rgba(42,226,255,.10),rgba(82,120,255,.10));
  box-shadow:inset 0 -2px 0 #2ae2ff;
}

.workspace-screen{
  position:relative;
  min-height:360px;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    #041124;
  background-size:24px 24px;
}

.workspace-panel{
  display:none;
  min-height:360px;
  animation:workspacePanelIn .32s ease;
}

.workspace-panel.active{
  display:block;
}

@keyframes workspacePanelIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.screen-filebar{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#7c9dba;
  font:9px "JetBrains Mono",monospace;
}

.screen-filebar span{
  display:flex;
  align-items:center;
  gap:7px;
}

.screen-filebar i{
  color:#5fd7ff;
  font-size:13px;
}

.screen-filebar small{
  color:#466481;
}

.workspace-panel pre{
  margin:0;
  padding:24px 22px 28px;
  overflow:auto;
  color:#a7bed7;
  font:11px/1.75 "JetBrains Mono",monospace;
  tab-size:2;
}

.syn-tag{color:#ff7eb6}
.syn-attr{color:#82d2ff}
.syn-string{color:#8be9b4}
.syn-keyword{color:#ba9cff}
.syn-var{color:#75d9ff}
.syn-selector{color:#ffd479}
.syn-prop{color:#78d6ff}
.syn-number{color:#ffb96d}
.syn-fn{color:#7ee6d3}
.syn-color{color:#9bdcff}
.syn-comment{color:#526f89;font-style:italic}

/* Design tool panels */
.design-canvas{
  min-height:322px;
  position:relative;
  overflow:hidden;
  background:#07152b;
}

.figma-canvas{
  display:grid;
  grid-template-columns:44px 1fr 130px;
  padding:16px;
  gap:12px;
}

.design-toolbar{
  border-radius:10px;
  background:#0b1d38;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding-top:16px;
}

.design-toolbar span{
  width:14px;height:14px;border:1px solid #56728e;border-radius:4px;
}

.design-frame{
  border-radius:8px;
  background:linear-gradient(145deg,#06152e,#0b3766);
  border:1px solid rgba(77,190,255,.20);
  padding:16px;
  display:flex;
  flex-direction:column;
}

.design-nav{height:8px;width:58%;border-radius:10px;background:#335d82;margin-bottom:42px}
.design-hero-lines{display:grid;gap:8px}.design-hero-lines b{height:11px;border-radius:3px;background:#91dfff}.design-hero-lines b:nth-child(2){width:72%;background:#507caa}.design-hero-lines b:nth-child(3){width:45%;background:#385d7e}
.design-button{width:80px;height:27px;border-radius:7px;background:linear-gradient(135deg,#2ae2ff,#5278ff);margin-top:22px}

.design-properties{
  border-radius:10px;background:#0a1d38;border:1px solid rgba(255,255,255,.06);padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.design-properties span{font-size:8px;color:#6f8ca9;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}

.photoshop-canvas{
  display:grid;
  grid-template-columns:42px 1fr 105px;
  gap:10px;
  padding:14px;
}
.ps-toolbar,.ps-layers{border-radius:9px;background:#0c1a2a;border:1px solid rgba(255,255,255,.06)}
.ps-artboard{position:relative;border-radius:8px;overflow:hidden;background:#071326}
.ps-gradient{position:absolute;inset:0;background:radial-gradient(circle at 25% 35%,#0cb9e9,transparent 35%),linear-gradient(145deg,#06152f,#392072)}
.ps-title{position:absolute;left:22px;bottom:24px;font-size:24px;font-weight:800;line-height:.9;color:#dff8ff;text-shadow:0 0 20px rgba(42,226,255,.35)}
.ps-layers{padding:12px;display:flex;flex-direction:column;gap:8px}
.ps-layers span{font-size:7px;color:#66839e;padding:7px;border-radius:5px;background:#0f2439}

.photopea-canvas{
  display:grid;
  grid-template-columns:45px 1fr 118px;
  gap:10px;
  padding:14px;
}
.photopea-leftbar,.photopea-rightbar{border-radius:8px;background:#0b1b2c;border:1px solid rgba(255,255,255,.06)}
.photopea-artboard{border-radius:8px;background:linear-gradient(145deg,#101d32,#0a3250);padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.asset-card{grid-column:1/-1;border-radius:9px;background:linear-gradient(135deg,#2ae2ff,#5278ff);min-height:100px}
.asset-card.small{grid-column:auto;min-height:65px;background:#173b5a}
.photopea-rightbar{padding:12px;display:flex;flex-direction:column;gap:10px}
.photopea-rightbar span{font-size:7px;color:#6e8ba5}

.canva-canvas{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  padding:14px;
}
.canva-sidebar{border-radius:10px;background:#0a1a33;border:1px solid rgba(255,255,255,.06);padding:12px;display:flex;flex-direction:column;gap:12px}
.canva-sidebar span{height:34px;border-radius:7px;background:#163653}
.canva-board{position:relative;border-radius:9px;overflow:hidden;background:linear-gradient(145deg,#07162e,#40216f);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.canva-board strong{position:relative;font-size:24px;letter-spacing:-1px;color:#e8faff}
.canva-board small{position:relative;color:#92bdda;font-size:8px;margin-top:8px}
.canva-orb{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#23d8ff,transparent 70%);filter:blur(22px);opacity:.28}

.workspace-footer{
  height:32px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#557592;
  background:#031022;
  font:8px "JetBrains Mono",monospace;
}

.workspace-footer span{
  display:flex;
  align-items:center;
  gap:5px;
}

.workspace-footer span:nth-child(2) i{color:#39e6aa}

@media(max-width:1100px){
  .developer-workspace{max-width:560px}
  .workspace-panel pre{font-size:10px}
}

@media(max-width:991px){
  .hero-workspace-wrap{min-height:500px}
  .developer-workspace{max-width:700px}
}

@media(max-width:650px){
  .hero-workspace-wrap{
    min-height:auto;
    width:100%;
  }

  .developer-workspace{
    border-radius:16px;
    max-width:100%;
  }

  .workspace-topbar{
    grid-template-columns:1fr auto;
  }

  .workspace-title{
    display:none;
  }

  .workspace-status{
    grid-column:2;
  }

  .workspace-tabs{
    padding:6px;
  }

  .workspace-tab{
    min-height:40px;
    padding:7px 9px;
  }

  .workspace-tab span{
    display:none;
  }

  .workspace-tab i{
    font-size:15px;
  }

  .workspace-screen,
  .workspace-panel{
    min-height:300px;
  }

  .workspace-panel pre{
    font-size:9px;
    line-height:1.65;
    padding:18px 14px;
  }

  .figma-canvas,
  .photoshop-canvas,
  .photopea-canvas{
    grid-template-columns:36px 1fr;
  }

  .design-properties,
  .ps-layers,
  .photopea-rightbar{
    display:none;
  }

  .canva-canvas{
    grid-template-columns:48px 1fr;
  }

  .workspace-footer{
    overflow-x:auto;
    white-space:nowrap;
  }
}

@media(prefers-reduced-motion:reduce){
  .workspace-panel{
    animation:none!important;
  }
}