@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --pw-bg: #0b0e17;
  --pw-bg-alt: #10141f;
  --pw-panel: #141928cc;
  --pw-panel-solid: #141928;
  --pw-border: #262c3f;
  --pw-neon-cyan: #4cc9f0;
  --pw-neon-pink: #f72585;
  --pw-neon-purple: #8b6bff;
  --pw-neon-green: #4ade80;
  --pw-neon-yellow: #fbbf24;
  --pw-text: #e6e9f2;
  --pw-text-dim: #8b93a8;
  --pw-danger: #f45b69;
  --pw-font-pixel: 'Inter', sans-serif;
  --pw-font-cyber: 'Inter', sans-serif;
  --pw-font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--pw-border) var(--pw-bg); }

body {
  margin: 0;
  background: var(--pw-bg);
  color: var(--pw-text);
  font-family: var(--pw-font-cyber);
  font-size: 15px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Subtle atmosphere: faint dual glow, no grid/scanline noise. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(139, 107, 255, 0.06), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(76, 201, 240, 0.06), transparent 40%);
}

/* Primary heading style — clean sans, single soft accent underline. */
.pw-cyber-heading {
  font-family: var(--pw-font-cyber);
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
  color: var(--pw-text);
}
.pw-cyber-heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pw-neon-cyan), var(--pw-neon-purple));
}

/* Pixel-art accent — used sparingly (login, small glyphs/badges) to keep the retro thread. */
.pw-pixel-heading {
  font-family: var(--pw-font-pixel);
  letter-spacing: 1px;
}
.pw-pixel-accent {
  font-family: var(--pw-font-pixel);
  image-rendering: pixelated;
}

a { color: var(--pw-neon-cyan); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--pw-neon-purple); }

button, .pw-btn {
  font-family: var(--pw-font-cyber);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  background: var(--pw-neon-cyan);
  color: #0b0e17;
  border: 1px solid var(--pw-neon-cyan);
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s ease-out;
}
button:hover, .pw-btn:hover {
  background: #6fd8f5;
  border-color: #6fd8f5;
}
button:active, .pw-btn:active { transform: translateY(1px); }

.pw-btn-danger { border-color: var(--pw-danger); color: #fff; background: var(--pw-danger); }
.pw-btn-danger:hover { background: #f8828d; border-color: #f8828d; }
.pw-btn-secondary { background: transparent; color: var(--pw-text-dim); border: 1px solid var(--pw-border); }
.pw-btn-secondary:hover { color: var(--pw-text); border-color: var(--pw-text-dim); background: transparent; }

input, select, textarea {
  font-family: var(--pw-font-cyber);
  font-size: 14px;
  background: var(--pw-bg-alt);
  color: var(--pw-text);
  border: 1px solid var(--pw-border);
  border-radius: 6px;
  padding: 9px 10px;
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pw-neon-cyan);
}

label {
  display: block;
  font-family: var(--pw-font-cyber);
  font-size: 12px;
  font-weight: 600;
  color: var(--pw-text-dim);
  margin-bottom: 6px;
  margin-top: 16px;
}

.pw-panel {
  position: relative;
  background: var(--pw-panel-solid);
  border: 1px solid var(--pw-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 22px;
  border-radius: 10px;
}

.pw-badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--pw-font-cyber);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 20px;
}
.pw-badge-draft { color: var(--pw-text-dim); border-color: var(--pw-border); }
.pw-badge-scheduled { color: var(--pw-neon-yellow); border-color: var(--pw-neon-yellow); }
.pw-badge-publishing { color: var(--pw-neon-purple); border-color: var(--pw-neon-purple); }
.pw-badge-published { color: var(--pw-neon-green); border-color: var(--pw-neon-green); }
.pw-badge-failed { color: var(--pw-danger); border-color: var(--pw-danger); }

.pw-code-block {
  position: relative;
  background: var(--pw-bg);
  border: 1px solid var(--pw-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 10px 0;
  font-family: var(--pw-font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pw-text);
  overflow-x: auto;
  white-space: pre;
}
.pw-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 10px;
  font-size: 11px;
}
.pw-help-text {
  color: var(--pw-text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 0;
}