/* =========================================================
   Zoth Studio — Unified Studio Suite Styling & Responsive Layout
   ========================================================= */

:root {
  --studio-bg: #030408;
  --studio-panel: rgba(10, 14, 26, 0.94);
  --studio-panel-border: rgba(255, 255, 255, 0.08);
  --studio-cyan: #00e5ff;
  --studio-magenta: #d946ef;
  --studio-violet: #8b5cf6;
  --studio-green: #10b981;
  --studio-amber: #f59e0b;
  --studio-text: #f1f5f9;
  --studio-muted: #94a3b8;
  --studio-mono: "IBM Plex Mono", ui-monospace, monospace;
  --studio-display: "Syne", system-ui, sans-serif;
  --studio-radius: 14px;
}

/* Glassmorphism Panels */
.studio-glass-panel {
  background: var(--studio-panel);
  border: 1px solid var(--studio-panel-border);
  border-radius: var(--studio-radius);
  padding: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  color: var(--studio-text);
  box-sizing: border-box;
}

/* Studio Navigation Header */
.deck-page .site-header {
  background: rgba(3, 4, 8, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.deck-page .nav-desktop {
  display: flex;
  gap: 16px;
  align-items: center;
}

.deck-page .nav-desktop a {
  color: var(--studio-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.deck-page .nav-desktop a:hover,
.deck-page .nav-desktop a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.3);
}

/* Mobile Responsiveness for Studio Suites */
@media (max-width: 1024px) {
  .studio-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: calc(100vh - 70px);
  }
  .studio-layout > aside {
    order: 2;
  }
  .studio-layout > section {
    order: 1;
    min-height: 480px;
    height: 55vh;
  }
  .deck-page .nav-desktop {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 4px;
  }
}

@media (max-width: 640px) {
  .studio-layout {
    padding: 8px !important;
    gap: 10px !important;
  }
  .viewport-top-hud, .viewport-bottom-hud {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    background: rgba(10, 14, 26, 0.9);
    padding: 8px;
    border-radius: 8px;
    margin: 6px;
  }
  .hud-group {
    justify-content: center;
    width: 100%;
  }
  .btn-cad {
    flex: 1 1 auto;
    font-size: 0.68rem !important;
    padding: 8px 6px !important;
  }
}