@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root{
  --bg:#05050a;
  --card:#0b0b12;
  --muted: rgba(184,250,255,0.12);
  --neon-cyan: #00f1ff;
  --neon-magenta: #ff3ecf;
  --neon-purple: #9b5cff;
  --neon-blue: #00b3ff;
  --accent1: #ff4b2b;
  --accent2: #7f00ff;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* canvas neon bg occupies behind */
#neonBg{
  position:fixed;
  inset:0;
  z-index:-2;
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.brand {display:flex; flex-direction:column;}
.brand-neon{
  font-weight:800;
  font-size:20px;
  color:var(--neon-cyan);
  text-shadow:
    0 0 6px rgba(0,241,255,0.9),
    0 0 18px rgba(155,92,255,0.6),
    0 0 36px rgba(255,62,207,0.25);
  display:inline-block;
  animation: neonPulse 3s ease-in-out infinite, hueShift 6s linear infinite;
  transform-origin:center;
}
.tag {font-size:11px; color: #9bdffd; opacity:0.8;}

/* brand text animation */
@keyframes neonPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(0,241,255,0.9)); }
  50% { transform: scale(1.04) rotate(-1deg); filter: drop-shadow(0 0 20px rgba(155,92,255,0.95)); }
  100% { transform: scale(1) rotate(1deg); filter: drop-shadow(0 0 6px rgba(0,241,255,0.9)); }
}
@keyframes hueShift {
  0% { color: var(--neon-cyan); }
  25% { color: var(--neon-magenta); }
  50% { color: var(--neon-purple); }
  75% { color: var(--neon-blue); }
  100% { color: var(--neon-cyan); }
}

/* Controls */
.controls{display:flex;align-items:center;gap:12px}
.btn{
  background: linear-gradient(90deg, rgba(0,241,255,0.06), rgba(127,0,255,0.05));
  border:1px solid rgba(255,255,255,0.06);
  color:var(--neon-cyan);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.btn.outline{ background: transparent; border:1px dashed rgba(255,255,255,0.04); }
.toggle-run{font-size:13px; color:#c6f7ff; display:flex;align-items:center;gap:6px}
.toggle-run input{width:16px;height:16px}

/* Layout */
.workspace{
  display:flex;
  gap:14px;
  padding:16px;
  height: calc(100vh - 64px);
}

/* Editors column */
.editors{
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:720px;
  overflow:auto;
  padding-right:8px;
}
.editor-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.03);
  padding:8px;
  border-radius:10px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.editor-header{
  font-size:13px;
  color:#bff9ff;
  margin-bottom:8px;
  padding-left:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.download-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  color:var(--neon-cyan);
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
}

/* textarea style */
textarea{
  resize:vertical;
  min-height:140px;
  background:rgba(0,0,0,0.5);
  color:#e6ffff;
  border:none;
  outline:none;
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:13px;
  border-radius:6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Preview column */
.preview{
  width:460px;
  max-width:46%;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.preview-header{
  font-size:13px;
  color:#bff9ff;
  padding-left:6px;
}
#previewFrame{
  flex:1;
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:#000;
  height:100%;
}

/* footer note */
.footer-note{
  margin-top:8px;
}
.footer-text{
  font-size:13px;
  color:#b8faff;
  text-align:center;
}
.animated-name{
  font-weight:700;
  background-image: linear-gradient(45deg, var(--accent1), var(--accent2), #00c6ff);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
  text-decoration:none;
}
@keyframes shine{ to { background-position:200% center; } }

/* Details panel */
.details-panel{
  position:fixed;
  right:18px;
  top:84px;
  width:280px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  padding:12px;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  z-index:999;
}
.details-panel.hidden{ display:none; }
.details-panel h3{ margin:6px 0 8px 0; color:var(--neon-magenta); }
.details-panel ul{ padding-left:18px; line-height:1.5; color:#cfefff; font-size:13px; }
.details-panel .close{ position:absolute; right:6px; top:6px; border:none; background:transparent; color:#fff; font-size:18px; cursor:pointer; }

/* small screens: stack */
@media (max-width:900px){
  .workspace{flex-direction:column; height: calc(100vh - 110px); padding:12px}
  .preview{width:100%; max-width:100%; height:46vh}
  .editors{max-width:100%}
  textarea{min-height:100px}
}