/* ==========================================
   KUYAPADS NETWORK - STUDIO SECTION STYLES
   ==========================================
   This file contains all studio-specific styles
   with proper namespacing to prevent conflicts.
   ========================================== */

/* Use homepage brand colors from core.css */
:root {
  --kp-blue: var(--kp-color-primary);
  --kp-yellow: var(--kp-color-accent);
  --kp-green: var(--kp-color-success);
  --kp-white: var(--kp-color-bg-primary);
  --kp-gradient: var(--kp-gradient-primary);
  --glass-bg: rgba(30, 42, 120, 0.82);
  --neon-shadow: 0 0 16px #228be6, 0 0 24px #ffe066, 0 0 32px #1e2a78;
  --card-radius: 1.5rem;
  --card-padding: 1.2rem;
  --transition: 0.25s cubic-bezier(.4,2,.6,1);
  --kpc-glow: 0 0 8px #ffe066, 0 0 16px #ffe066;
  --vip-glow: 0 0 8px #ffd700, 0 0 16px #ffd700;
  --font-main: var(--kp-font-primary);
}

body.kp-studio {
  background: var(--kp-gradient);
  color: var(--kp-color-text-primary);
  font-family: var(--font-main);
  min-height: 100vh;
}

.kp-header {
  background: var(--glass-bg);
  box-shadow: var(--neon-shadow);
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  z-index: 100;
}

.studio-main-content {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.studio-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.studio-tool-card {
  background: var(--glass-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--neon-shadow);
  text-align: center;
  transition: var(--transition);
}

.studio-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--neon-shadow), 0 8px 16px rgba(0,0,0,0.2);
}

.tool-icon {
  font-size: 3rem;
  color: var(--kp-yellow);
  margin-bottom: 1rem;
  text-shadow: var(--kpc-glow);
}

.tool-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.tool-description {
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}

.studio-btn {
  background: var(--kp-blue);
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--neon-shadow);
}

.studio-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--neon-shadow), 0 8px 16px rgba(0,0,0,0.2);
}

.ai-engine-section {
  background: var(--glass-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin: 2rem 0;
  box-shadow: var(--neon-shadow);
}

.engine-controls {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.canvas-workspace {
  background: rgba(255,255,255,0.1);
  border-radius: var(--card-radius);
  padding: 2rem;
  margin: 2rem 0;
  min-height: 400px;
  border: 2px dashed rgba(255,255,255,0.3);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
}

.project-manager {
  background: var(--glass-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-top: 2rem;
  box-shadow: var(--neon-shadow);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.project-card {
  background: rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
}

.project-card:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* Add studio-specific styles below */