/* ============================================================
   PLAYGROUND ULTRA, editor chrome polish
   Loaded after playground.css. Scoped to body.pg-body.
   Chrome only, never touches CodeMirror internals or the preview iframe.
   ============================================================ */
.pg-body {
  --elec:   #00e0ff;
  --elec-2: #19f5c8;
  --mono:   'JetBrains Mono','SFMono-Regular',Consolas,Menlo,monospace;
}

/* ── top nav, dark glass ── */
.pg-body .pg-nav {
  background: rgba(10,22,40,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,224,255,.16);
}
.pg-body .pg-nav-title { font-family: var(--mono); letter-spacing: .04em; }
.pg-body .pg-nav-link { transition: all .2s ease; border-radius: 9px; }
.pg-body .pg-nav-link:hover,
.pg-body .pg-nav-link.active {
  color: #eafcff;
  background: rgba(0,224,255,.14);
  box-shadow: inset 0 0 0 1px rgba(0,224,255,.25);
}

/* live/online chip, a real "connected" pulse */
.pg-body .pg-online-chip {
  font-family: var(--mono);
  border: 1px solid rgba(25,245,200,.35);
  box-shadow: 0 0 14px rgba(25,245,200,.18);
}
.pg-body .pg-online-chip::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--elec-2);
  margin-right: 7px;
  box-shadow: 0 0 8px var(--elec-2);
  animation: pg-live 1.8s ease-in-out infinite;
}
@keyframes pg-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.pg-body .pg-user-chip { font-family: var(--mono); }

/* ── toolbar ── */
.pg-body .pg-toolbar {
  background: linear-gradient(180deg, rgba(13,31,56,.96), rgba(10,22,40,.96));
  border-bottom: 1px solid rgba(0,224,255,.14);
}
.pg-body .pg-tool-btn {
  border-radius: 9px;
  transition: all .2s ease;
}
.pg-body .pg-tool-btn:hover {
  color: var(--elec);
  background: rgba(0,224,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,224,255,.3);
  transform: translateY(-1px);
}
.pg-body .pg-tool-btn:active { transform: translateY(0) scale(.96); }
.pg-body .pg-tool-divider { background: rgba(0,224,255,.18); }

/* run / primary actions get the electric treatment */
.pg-body .pg-tool-btn.primary,
.pg-body .pg-run-btn,
.pg-body .btn-primary {
  background: linear-gradient(120deg, #00bcd4, #05a2bd);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(0,188,212,.34);
}
.pg-body .pg-tool-btn.primary:hover,
.pg-body .pg-run-btn:hover,
.pg-body .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0,224,255,.48);
  transform: translateY(-1px);
}

/* pro hint pill */
.pg-body .pg-pro-hint {
  font-family: var(--mono);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 50px;
}

/* theme switcher */
.pg-body .pg-theme-btn { transition: all .2s ease; border-radius: 8px; }
.pg-body .pg-theme-btn:hover { color: var(--elec); box-shadow: inset 0 0 0 1px rgba(0,224,255,.3); }
.pg-body .pg-theme-btn.active {
  color: var(--elec);
  background: rgba(0,224,255,.14);
  box-shadow: inset 0 0 0 1px var(--elec);
}

/* editor pane tabs / headers */
.pg-body .pg-pane-header,
.pg-body .pg-editor-header { border-bottom: 1px solid rgba(0,224,255,.14); }
.pg-body .pg-tab { transition: all .2s ease; }
.pg-body .pg-tab.active {
  color: var(--elec) !important;
  border-bottom-color: var(--elec) !important;
  text-shadow: 0 0 12px rgba(0,224,255,.4);
}

/* resizers glow so they're discoverable */
.pg-body .pg-resizer,
.pg-body .pg-splitter { transition: background .2s ease; }
.pg-body .pg-resizer:hover,
.pg-body .pg-splitter:hover { background: var(--elec) !important; box-shadow: 0 0 12px rgba(0,224,255,.5); }

/* ============================================================
   LIGHT MODE (.pg-body.light), contrast fixes
   playground.css's light theme never covered .btn-ghost (it is
   rgba(255,255,255,.85), so "Sign In" was white-on-white), and the
   electric colours above are tuned for a dark nav. Fix both here.
   ============================================================ */
.pg-body.light .btn-ghost {
  color: #1a1a2e !important;
  border-color: #cbd5e1 !important;
  background: rgba(0,0,0,.03) !important;
}
.pg-body.light .btn-ghost:hover {
  background: rgba(0,0,0,.08) !important;
  color: #000 !important;
}
.pg-body.light .btn-outline {
  color: #1a1a2e !important;
  border-color: #cbd5e1 !important;
}
/* my own electric chrome, re-tuned for a light nav */
.pg-body.light .pg-nav-link:hover,
.pg-body.light .pg-nav-link.active {
  color: #0e7490 !important;
  background: rgba(0,188,212,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,188,212,.3);
}
.pg-body.light .pg-tool-btn:hover {
  color: #0e7490 !important;
  background: rgba(0,188,212,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,188,212,.28);
}
.pg-body.light .pg-tab.active {
  color: #0e7490 !important;
  border-bottom-color: #0e7490 !important;
  text-shadow: none !important;
}
.pg-body.light .pg-theme-btn:hover,
.pg-body.light .pg-theme-btn.active {
  color: #0e7490 !important;
  background: rgba(0,188,212,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0,188,212,.35) !important;
}
.pg-body.light .pg-nav-title { color: #1a1a2e !important; }
.pg-body.light .pg-online-chip {
  border-color: rgba(5,150,105,.4) !important;
  color: #047857 !important;
  box-shadow: none !important;
}
.pg-body.light .pg-online-chip::before { background: #10b981; box-shadow: 0 0 6px #10b981; }
/* --- elements playground.css's light theme forgot entirely ---
   Each of these is near-white text (rgba(255,255,255,.6-.7) or #fff) with no
   .pg-body.light rule, so all of them were invisible on the light chrome.
   Audited by diffing every white-text selector against the light block. */
.pg-body.light .pg-panel-label   { color: #334155 !important; }   /* the "HTML/CSS/JS" pane titles */
.pg-body.light .pg-preview-header,
.pg-body.light .pg-preview-title { color: #334155 !important; }
.pg-body.light .pg-modal-header h3 { color: #1a1a2e !important; }
.pg-body.light .pg-modal-close   { color: #64748b !important; }
.pg-body.light .pg-modal-close:hover { color: #111 !important; }
.pg-body.light .pg-input {
  color: #1a1a2e !important;
  background: #fff !important;
  border-color: #cbd5e1 !important;
}
.pg-body.light .pg-input::placeholder { color: #94a3b8 !important; }
.pg-body.light .pg-privacy-toggle { color: #475569 !important; }
.pg-body.light .pg-privacy-toggle:hover { color: #0f172a !important; }
.pg-body.light .pg-proj-item,
.pg-body.light .pg-proj-title { color: #1a1a2e !important; }

.pg-body.light .pg-toolbar { border-bottom-color: #d1d5db !important; }
.pg-body.light .pg-pane-header,
.pg-body.light .pg-editor-header { border-bottom-color: #d1d5db !important; }
.pg-body.light .pg-tool-divider { background: #d1d5db !important; }
.pg-body.light .pg-pro-hint { color: #b45309 !important; border-color: rgba(180,83,9,.35) !important; }

@media (prefers-reduced-motion: reduce) {
  .pg-body *,
  .pg-body .pg-online-chip::before { animation: none !important; transition: none !important; }
}