/* easy-prompt.css — terminal-aesthetic reskin of the dropdown prompt builder */

:root {
  /* Tier palette — extends the global terminal palette */
  --tier-vanilla: #5a8a5a;
  --tier-godmode: #00ff41;
  --tier-godmode-plus: #00ffaa;
  --tier-one-shot: #ffaa00;
  --tier-orchestra: #ff3366;
}

body { min-height: 100vh; }

main#main { padding-top: 0; }

/* ─── STICKY PAGE TITLE BAR ──────────────────────────────────────────── */
/* top: 0 + padding-top covering the nav height so the bar's solid background
   stretches from the very top of the viewport — no gap for content to bleed
   through, regardless of how tall the fixed nav actually is. */
.ep-page-title-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
  border-bottom: 1px solid var(--green-muted);
  padding: 72px 0 12px;
  overflow: clip;
}

/* ─── HERO ───────────────────────────────────────────────────────────── */
.ep-hero {
  padding: 32px 0 60px;
  position: relative;
}

.ep-page-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.ep-page-title-name {
  font-size: clamp(40px, 11vw, 92px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  margin: 0;
  white-space: nowrap;
  background-image: linear-gradient(
    90deg,
    #ff3366 0%,
    #ff9933 14%,
    #ffee00 28%,
    #33ff88 42%,
    #00ddff 57%,
    #6633ff 71%,
    #ff33cc 85%,
    #ff3366 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.55))
    drop-shadow(2px 0 0 rgba(0, 230, 255, 0.55));
  position: relative;
  animation:
    ep-title-rainbow 5.5s linear infinite,
    ep-title-chroma 2.8s ease-in-out infinite,
    ep-title-glitch 7.3s steps(1) infinite;
}

@keyframes ep-title-rainbow {
  0%   { background-position: 0%   50%; }
  100% { background-position: 300% 50%; }
}

/* Subtle jitter — most of the cycle is dead still, then two short bursts. */
@keyframes ep-title-glitch {
  0%, 28%, 30%, 32%, 34%, 36%, 86%, 88%, 90%, 92%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  29% { transform: translate(2px, -1px) skew(-1deg); }
  31% { transform: translate(-3px, 1px) skew(1.2deg); }
  33% { transform: translate(1px, 0)    skew(-0.4deg); }
  35% { transform: translate(-1px, -1px) skew(0.6deg); }
  87% { transform: translate(-2px, 1px) skew(0.8deg); }
  89% { transform: translate(3px, -1px) skew(-1deg); }
  91% { transform: translate(-1px, 0)   skew(0.3deg); }
}

/* Slice glitch — a thin horizontal band of the title briefly jumps sideways. */
.ep-page-title-name::before {
  content: "Easy Prompt";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: ep-title-slice 7.3s steps(1) infinite;
}

@keyframes ep-title-slice {
  0%, 39%, 42%, 45%, 96%, 100% {
    clip-path: inset(0 0 100% 0);
    transform: translate(0, 0);
  }
  40% {
    clip-path: inset(35% 0 55% 0);
    transform: translate(-5px, 0);
  }
  41% {
    clip-path: inset(65% 0 25% 0);
    transform: translate(4px, 0);
  }
  43% {
    clip-path: inset(15% 0 75% 0);
    transform: translate(3px, 0);
  }
  44% {
    clip-path: inset(50% 0 40% 0);
    transform: translate(-3px, 0);
  }
  93% {
    clip-path: inset(20% 0 65% 0);
    transform: translate(-4px, 0);
  }
  94% {
    clip-path: inset(70% 0 15% 0);
    transform: translate(5px, 0);
  }
  95% {
    clip-path: inset(45% 0 45% 0);
    transform: translate(-2px, 0);
  }
}

@keyframes ep-title-chroma {
  0%, 100% {
    filter:
      drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.55))
      drop-shadow(2px 0 0 rgba(0, 230, 255, 0.55));
  }
  50% {
    filter:
      drop-shadow(-3px 1px 0 rgba(255, 0, 80, 0.7))
      drop-shadow(3px -1px 0 rgba(0, 230, 255, 0.7));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-page-title-name,
  .ep-page-title-name::before {
    animation: none;
  }
  .ep-page-title-name::before {
    display: none;
  }
}

.ep-page-title-by {
  font-size: clamp(10px, 1.4vw, 13px);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  padding-left: 2px;
}

.ep-page-title-by span {
  color: var(--green);
  font-weight: 600;
  text-shadow: 0 0 8px var(--green-glow);
}

.ep-h1 {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--white);
  text-shadow: 0 0 30px var(--green-glow);
  margin-bottom: 28px;
}

.ep-h1-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--text-dim);
  text-shadow: none;
}

/* Cycling hero phrase — fades between verbs/nouns to advertise breadth. */
.ep-h1-cycle {
  display: inline-block;
  transition: opacity 0.35s ease;
  color: var(--white);
}
.ep-h1-cycle.is-fading {
  opacity: 0;
}

.ep-sub {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 520px;
  line-height: 1.7;
}

.ep-sub-tag {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ─── BUILDER ────────────────────────────────────────────────────────── */
.ep-builder {
  padding: 40px 0 80px;
}

/* Site-wide `.container` sets `overflow-x: hidden` on mobile, which the
   spec auto-promotes to `overflow-y: auto` — that turns `.container` into
   a scrolling ancestor and silently breaks `position: sticky` for any
   descendant. Restore visible overflow inside the builder so the sticky
   prompt box pins correctly. */
.ep-builder > .container {
  overflow: visible;
}

.ep-step {
  margin-bottom: 40px;
}

.ep-step-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* In the builder, step labels act as actual section headings (not eyebrows
   above an h2 like in the arch / what's-next sections), so they need
   heading-tier size and contrast. */
.ep-builder .ep-step-label {
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 2px;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 20px;
}

/* Color-code each builder step so users can scan sections at a glance.
   Palette pulled from the tier colors so it stays on-brand. Green is
   reused for the live prompt (top) and the plan (output) — both are
   "result" surfaces; the three middle steps (input phase) get their
   own accents. */
.ep-step-template .ep-step-label {
  color: var(--tier-godmode-plus);
  text-shadow: 0 0 12px rgba(0, 255, 170, 0.25);
}
.ep-step-formula .ep-step-label {
  color: var(--tier-one-shot);
  text-shadow: 0 0 12px rgba(255, 170, 0, 0.25);
}
.ep-step-stack .ep-step-label {
  color: var(--tier-orchestra);
  text-shadow: 0 0 12px rgba(255, 51, 102, 0.25);
}
.ep-step-plan .ep-step-label {
  color: var(--green);
  text-shadow: 0 0 12px var(--green-glow);
}
.ep-prompt-label {
  text-shadow: 0 0 12px var(--green-glow);
}
.ep-step-note {
  font-size: 13px;
  color: var(--green-dim, #6ea376);
  margin: -8px 0 16px;
  letter-spacing: 0.5px;
}

/* Section 02 — each dropdown gets its own accent color so the five
   inputs read as distinct stages of the formula, not a uniform amber
   block. --dd-rgb is the channel triplet picked up by every rule
   below, so the cycle is defined once at the top. */
.ep-step-formula .ep-dropdown                 { --dd-rgb: 255, 170, 0; }   /* fallback */
.ep-step-formula .ep-dropdown:nth-child(1)    { --dd-rgb: 0, 255, 170; }   /* mint */
.ep-step-formula .ep-dropdown:nth-child(2)    { --dd-rgb: 255, 170, 0; }   /* amber */
.ep-step-formula .ep-dropdown:nth-child(3)    { --dd-rgb: 255, 51, 102; }  /* pink */
.ep-step-formula .ep-dropdown:nth-child(4)    { --dd-rgb: 0, 221, 255; }   /* cyan */
.ep-step-formula .ep-dropdown:nth-child(5)    { --dd-rgb: 187, 136, 255; } /* violet */

/* Bigger gap so each card delineates as a distinct step. */
.ep-step-formula .ep-dropdowns {
  gap: 14px;
}

.ep-step-formula .ep-dropdown-trigger {
  background: rgba(var(--dd-rgb), 0.06);
  border: 1px solid rgba(var(--dd-rgb), 0.45);
}
.ep-step-formula .ep-dropdown-trigger:hover {
  border-color: rgb(var(--dd-rgb));
  background: rgba(var(--dd-rgb), 0.1);
}
.ep-step-formula .ep-dropdown.is-open .ep-dropdown-trigger {
  border-color: rgb(var(--dd-rgb));
  background: rgba(var(--dd-rgb), 0.13);
  box-shadow: 0 0 0 1px rgb(var(--dd-rgb)), 0 0 24px rgba(var(--dd-rgb), 0.22);
}
.ep-step-formula .ep-dropdown-label {
  color: rgb(var(--dd-rgb));
}
.ep-step-formula .ep-dropdown-chevron {
  color: rgb(var(--dd-rgb));
}
.ep-step-formula .ep-dropdown-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(var(--dd-rgb));
  text-shadow: 0 0 8px rgba(var(--dd-rgb), 0.35);
  margin: 0 0 8px;
}

/* In-card label is no longer rendered (replaced by the subheading
   above the trigger); bump trigger padding so the value gets the
   vertical breathing room the old two-line layout had. */
.ep-step-formula .ep-dropdown-trigger {
  padding: 14px 16px;
}
.ep-step-formula .ep-dropdown-value {
  font-size: 14px;
}
.ep-step-formula .ep-dropdown-panel {
  border-color: rgba(var(--dd-rgb), 0.5);
  background: var(--bg-card);
}
.ep-step-formula .ep-dropdown-option:hover {
  background: rgba(var(--dd-rgb), 0.1);
  color: rgb(var(--dd-rgb));
}
.ep-step-formula .ep-dropdown-option.is-selected {
  background: rgba(var(--dd-rgb), 0.16);
  color: rgb(var(--dd-rgb));
}

/* ─── 01 TEMPLATE GRID ───────────────────────────────────────────────── */
.ep-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ep-template {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}

.ep-template:hover {
  border-color: var(--green-muted);
}

.ep-template.is-selected {
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.05);
  box-shadow: inset 0 0 30px rgba(0, 255, 65, 0.06);
}

.ep-template.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ep-template-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}

.ep-template-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ep-template-soon {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 6px;
  padding: 2px 6px;
  border: 1px solid var(--border);
}

/* ─── 02 LIVE PROMPT BOX ─────────────────────────────────────────────── */
/* The sparkle / shimmer intensity scales with --fill-pct (0 → 1) which JS
   sets based on how many dropdowns the user has filled. Empty box = quiet
   panel; fully filled box = full sparkle and shimmer storm. */
.ep-prompt-box {
  --fill-pct: 0;
  background:
    linear-gradient(
      135deg,
      rgba(0, 255, 65, 0.06) 0%,
      rgba(0, 255, 65, 0.12) 50%,
      rgba(0, 255, 65, 0.06) 100%
    ),
    var(--bg-terminal);
  border: 1px solid var(--green-muted);
  padding: 28px 32px;
  min-height: 140px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 40px rgba(0, 255, 65, 0.1),
    0 0 28px rgba(0, 255, 65, 0.18);
}

/* Sparkle field — 50 stars split across three layers (A in ::after,
   B and C in real spans) so each layer twinkles on its own clock.
   Different durations + negative delays mean the layers drift out of
   phase, so individual stars appear to wink in/out at random times
   instead of the whole field pulsing in unison. */
.ep-prompt-box::after,
.ep-prompt-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.9));
}

/* Layer A — 17 stars, fastest cadence. */
.ep-prompt-box::after {
  content: "";
  background-image:
    radial-gradient(2.5px 2.5px at 4% 12%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 14% 62%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 23% 26%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 32% 90%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(3px 3px at 41% 56%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 50% 24%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2px 2px at 59% 86%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 68% 54%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 77% 18%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 86% 82%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 48%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 9% 16%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 19% 72%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 28% 58%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 45% 92%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 63% 84%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 81% 96%, rgba(255, 255, 255, 1), transparent 60%);
  animation: ep-prompt-twinkle 0.7s ease-in-out infinite alternate;
}

/* Layer B — 17 stars, mid cadence, offset start. */
.ep-prompt-sparkles-b {
  background-image:
    radial-gradient(1px 1px at 8% 28%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(3px 3px at 17% 80%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 26% 50%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2px 2px at 35% 14%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 44% 76%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 53% 46%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 62% 12%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 74%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 80% 40%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(3px 3px at 89% 4%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 98% 70%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 13% 38%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2px 2px at 31% 4%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 51% 78%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2px 2px at 69% 28%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 87% 38%, rgba(0, 255, 65, 1), transparent 60%);
  animation: ep-prompt-twinkle 0.95s ease-in-out -0.3s infinite alternate;
}

/* Layer C — 16 stars, slowest cadence, larger offset. */
.ep-prompt-sparkles-c {
  background-image:
    radial-gradient(2px 2px at 11% 44%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 20% 8%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 29% 70%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 38% 36%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 6%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 56% 66%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(3px 3px at 65% 32%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 74% 94%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(2px 2px at 83% 62%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 92% 24%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(2px 2px at 6% 90%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 16% 56%, rgba(0, 255, 170, 1), transparent 60%),
    radial-gradient(3px 3px at 25% 22%, rgba(192, 255, 192, 1), transparent 60%),
    radial-gradient(1px 1px at 39% 64%, rgba(0, 255, 65, 1), transparent 60%),
    radial-gradient(3px 3px at 57% 10%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1px 1px at 75% 60%, rgba(0, 255, 170, 1), transparent 60%);
  animation: ep-prompt-twinkle 1.15s ease-in-out -0.6s infinite alternate;
}

/* Twinkle peaks scale with fill — at 0 fill the dots are invisible, at
   full fill they pulse to full opacity. var() in keyframes inherits the
   --fill-pct from the parent box. */
@keyframes ep-prompt-twinkle {
  0%   { opacity: calc(0.25 * var(--fill-pct)); }
  50%  { opacity: calc(0.7  * var(--fill-pct)); }
  100% { opacity: var(--fill-pct); }
}

/* Shimmer sweep — diagonal highlight sweeps across the box ~every 3s,
   with a brighter twin-color peak so the sweep reads as light, not just
   a band. */
.ep-prompt-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(0, 255, 65, 0.22) 47%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(0, 255, 170, 0.22) 53%,
    transparent 72%
  );
  transform: translateX(-110%);
  animation: ep-prompt-shimmer 3s ease-in-out infinite;
  /* Shimmer also scales with fill — invisible at empty, full at ready. */
  opacity: var(--fill-pct);
}

@keyframes ep-prompt-shimmer {
  0%, 25% { transform: translateX(-110%); }
  100%    { transform: translateX(110%); }
}

/* "Ready to deploy" state — continuous low-amplitude rumble (jitter
   on x/y + tiny rotation) so the box feels charged with energy while
   sitting at full sparkle. ~2 cycles/sec — a slow, deliberate rumble. */
.ep-prompt-box.is-ready {
  animation: ep-prompt-rumble 0.5s linear infinite;
}

@keyframes ep-prompt-rumble {
  0%   { transform: translate(0, 0)      rotate(0); }
  10%  { transform: translate(-1px, 1px) rotate(0.12deg); }
  20%  { transform: translate(1px, -1px) rotate(-0.12deg); }
  30%  { transform: translate(-1px, -1px) rotate(0.08deg); }
  40%  { transform: translate(1px, 1px)  rotate(-0.08deg); }
  50%  { transform: translate(0, -1px)   rotate(0); }
  60%  { transform: translate(-1px, 0)   rotate(0.1deg); }
  70%  { transform: translate(1px, 0)    rotate(-0.1deg); }
  80%  { transform: translate(0, 1px)    rotate(0); }
  90%  { transform: translate(1px, -1px) rotate(0.05deg); }
  100% { transform: translate(0, 0)      rotate(0); }
}

/* Status pill text color flips red when ready — reads as a charged,
   "armed and live" state rather than a sleepy process indicator. */
.ep-prompt-status-text {
  transition: color 0.3s ease;
}
.ep-prompt-box.is-ready .ep-prompt-status-text {
  color: var(--red);
  text-shadow: 0 0 6px rgba(255, 51, 51, 0.7);
  animation: ep-ready-breathe 1.4s ease-in-out infinite;
}
.ep-prompt-box.is-ready .ep-prompt-dot {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

/* Breathe — ready pill text pulses opacity so it reads as a live,
   armed signal. Synced roughly with the dot's ep-pulse cadence. */
@keyframes ep-ready-breathe {
  0%, 100% { opacity: 1;    text-shadow: 0 0 6px  rgba(255, 51, 51, 0.7); }
  50%      { opacity: 0.45; text-shadow: 0 0 12px rgba(255, 51, 51, 0.95); }
}

/* Keep text content above the sparkle/shimmer layers. */
.ep-prompt-text {
  position: relative;
  z-index: 1;
}
.ep-prompt-status {
  z-index: 2;
}

/* Sticky variant — pins below the fixed nav so users watch the prompt
   change as they scroll through dropdowns / tier ladder / plan preview.
   z-index 20 = above page content but below dropdown panels (z-30) so
   their option lists still open above the sticky box. */
.ep-prompt-sticky {
  position: sticky;
  top: calc(87px + clamp(40px, 11vw, 92px) + clamp(16px, 2.24vw, 20.8px));
  z-index: 20;
  margin-bottom: 40px;
  border-color: var(--green);
  box-shadow:
    inset 0 0 40px rgba(0, 255, 65, 0.1),
    0 0 32px rgba(0, 255, 65, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.7);
}

.ep-prompt-label {
  margin-bottom: 14px;
}

.ep-prompt-status {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.ep-prompt-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: ep-pulse 1.6s ease-in-out infinite;
}

@keyframes ep-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ep-prompt-text {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.6;
  color: var(--white);
}

.ep-prompt-word.is-filled {
  color: var(--green);
  text-shadow: 0 0 8px var(--green-glow);
  text-decoration: underline;
  text-decoration-color: var(--green-dark);
  text-underline-offset: 5px;
}

.ep-prompt-word.is-empty {
  color: var(--text-dim);
  font-style: italic;
}

/* ─── 03 DROPDOWNS ───────────────────────────────────────────────────── */
.ep-dropdowns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ep-dropdown {
  position: relative;
}

.ep-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
  transition: border-color 0.15s;
}

.ep-dropdown-trigger:hover {
  border-color: var(--green-muted);
}

.ep-dropdown.is-open .ep-dropdown-trigger {
  border-color: var(--green);
}

.ep-dropdown-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ep-dropdown-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
}

.ep-dropdown-value {
  font-size: 13px;
  color: var(--white);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-dropdown-value.is-empty {
  color: var(--text-muted);
}

.ep-dropdown-chevron {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.2s;
  margin-left: 8px;
  flex-shrink: 0;
}

.ep-dropdown.is-open .ep-dropdown-chevron {
  transform: rotate(180deg);
}

.ep-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--green-muted);
  max-height: 240px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.ep-dropdown.is-open .ep-dropdown-panel {
  display: block;
}

.ep-dropdown-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.ep-dropdown-option:hover {
  background: rgba(0, 255, 65, 0.06);
  color: var(--green);
}

.ep-dropdown-option.is-selected {
  background: rgba(0, 255, 65, 0.08);
  color: var(--green);
}

/* Custom-input row at the bottom of every dropdown panel. Lets users type
   their own value when none of the presets fit. Heavy sanitization both client
   and server-side keeps prompt-injection attempts from reaching the API. */
.ep-dropdown-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 12px;
  border-top: 1px dashed rgba(0, 255, 65, 0.2);
  background: rgba(0, 255, 65, 0.02);
}

.ep-dropdown-custom-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  opacity: 0.7;
}

.ep-dropdown-custom-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 65, 0.25);
  color: var(--green);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ep-dropdown-custom-input::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.ep-dropdown-custom-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 12px rgba(0, 255, 65, 0.3);
}

/* Tier-color theming when nested inside the formula step. */
.ep-step-formula .ep-dropdown-custom {
  border-top-color: rgba(var(--dd-rgb), 0.25);
  background: rgba(var(--dd-rgb), 0.03);
}
.ep-step-formula .ep-dropdown-custom-input {
  border-color: rgba(var(--dd-rgb), 0.3);
  color: rgb(var(--dd-rgb));
}
.ep-step-formula .ep-dropdown-custom-input:focus {
  border-color: rgb(var(--dd-rgb));
  box-shadow: 0 0 0 1px rgb(var(--dd-rgb)), 0 0 16px rgba(var(--dd-rgb), 0.35);
}

/* Flagged-input states — when user typed something that looks like a
   prompt-injection attempt, override the tier-color theme with a hard red
   warning so it's impossible to miss. */
.ep-dropdown.is-flagged .ep-dropdown-trigger,
.ep-step-formula .ep-dropdown.is-flagged .ep-dropdown-trigger {
  border-color: #ff3333 !important;
  background: rgba(255, 51, 51, 0.07) !important;
  box-shadow: 0 0 0 1px rgba(255, 51, 51, 0.4) !important;
}
.ep-dropdown.is-flagged .ep-dropdown-value {
  color: #ff6666;
}
.ep-dropdown.is-flagged .ep-dropdown-custom,
.ep-step-formula .ep-dropdown.is-flagged .ep-dropdown-custom {
  border-top-color: rgba(255, 51, 51, 0.4);
  background: rgba(255, 51, 51, 0.05);
}
.ep-dropdown.is-flagged .ep-dropdown-custom-input,
.ep-step-formula .ep-dropdown.is-flagged .ep-dropdown-custom-input {
  border-color: #ff3333 !important;
  color: #ff6666 !important;
}
.ep-dropdown.is-flagged .ep-dropdown-custom-input:focus,
.ep-step-formula .ep-dropdown.is-flagged .ep-dropdown-custom-input:focus {
  border-color: #ff3333 !important;
  box-shadow: 0 0 0 1px #ff3333, 0 0 12px rgba(255, 51, 51, 0.4) !important;
}
.ep-dropdown-custom-warning {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #ff6666;
  line-height: 1.4;
  word-break: break-word;
}
.ep-dropdown-custom-warning[hidden] {
  display: none;
}

/* ─── 04 TIER LADDER ─────────────────────────────────────────────────── */
.ep-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-tier {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.ep-tier:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ep-tier.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ep-tier.is-selected {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--tier-color, var(--green));
  box-shadow: inset 4px 0 0 var(--tier-color, var(--green)),
              0 0 24px rgba(0, 255, 65, 0.06);
}

.ep-tier-bars {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.ep-tier-bar {
  width: 6px;
  height: 36px;
  background: var(--border);
  transition: background 0.2s;
}

.ep-tier-bar.is-on {
  background: var(--tier-color, var(--green));
  box-shadow: 0 0 4px var(--tier-color, var(--green));
}

.ep-tier-info {
  flex: 1;
  min-width: 0;
}

.ep-tier-name {
  font-size: 13px;
  color: var(--tier-color, var(--green));
  display: flex;
  align-items: center;
  gap: 6px;
}

.ep-tier-lock {
  color: var(--text-muted);
  font-size: 10px;
}

.ep-tier-cap {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.ep-tier-price {
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  color: var(--tier-color, var(--green));
  align-self: flex-start;
}

.ep-tier-price-na {
  color: var(--text-muted);
  font-size: 11px;
}

.ep-tier-price-free {
  color: var(--text-dim);
}

.ep-tier-price-strike {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

.ep-tier-price-soon {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 6px;
  border: 1px solid var(--border);
}

.ep-tier.is-soon .ep-tier-name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.7;
}

.ep-flow-route.is-soon .ep-flow-route-name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}

.ep-flow-route.is-soon .ep-flow-route-tag {
  color: var(--text-muted);
  border-color: var(--border);
}

/* ─── 05 PLAN PREVIEW ────────────────────────────────────────────────── */
.ep-plan-card {
  background: var(--bg-terminal);
  border: 1px solid var(--border);
  padding: 22px;
  margin-bottom: 12px;
}

.ep-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.ep-plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--green);
}

.ep-plan-icon {
  color: var(--green);
}

.ep-plan-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.ep-plan-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-plan-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ep-plan-scope {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.ep-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ep-plan-list {
  list-style: none;
  font-size: 12px;
  color: var(--text);
  line-height: 1.9;
}

.ep-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.ep-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.ep-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.ep-stat-value {
  font-size: 14px;
  color: var(--text);
  margin-top: 2px;
}

/* Real-plan replacement: when /plan returns, the static card body is swapped
   for the live plan content. Sections stack vertically, headings reuse the
   existing uppercase muted-label style. */
.ep-plan-real-section + .ep-plan-real-section { margin-top: 14px; }
.ep-plan-real-content {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}
.ep-plan-real-content p { margin: 0 0 8px; }
.ep-plan-real-content p:last-child { margin-bottom: 0; }
.ep-plan-real-content ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.ep-plan-real-content li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 3px;
  font-size: 12px;
  line-height: 1.7;
}
.ep-plan-real-content li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  opacity: 0.7;
}
.ep-plan-real-content code {
  background: rgba(0, 255, 65, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.ep-plan-real-content strong { color: var(--green); }
.ep-plan-card.is-real-plan .ep-plan-meta { color: var(--green); }

/* Confirm strip */
.ep-confirm {
  background: var(--bg-terminal);
  border: 1px solid var(--tier-color, var(--green));
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s;
}

.ep-confirm-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ep-confirm-check {
  color: var(--tier-color, var(--green));
  font-size: 16px;
  flex-shrink: 0;
}

.ep-confirm-label {
  font-size: 11px;
  color: var(--text-muted);
}

.ep-confirm-skill {
  font-size: 14px;
  color: var(--tier-color, var(--green));
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-confirm-right {
  text-align: right;
  flex-shrink: 0;
}

.ep-confirm-pricelabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.ep-confirm-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--tier-color, var(--green));
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.3);
}

/* ─── 06 AUTH BLOCK (email + OTP, above action buttons) ───────────────── */
.ep-auth {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-auth-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ep-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-email-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.ep-email-input {
  flex: 1;
  min-width: 0; /* let the input shrink past its intrinsic size so the Send button stays inside the viewport on narrow screens */
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-email-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.18);
}
.ep-email-input.is-invalid {
  border-color: #ff4444;
  box-shadow: 0 0 0 1px rgba(255, 68, 68, 0.25);
}

.ep-email-help {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.ep-otp-send,
.ep-otp-verify {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.12s;
}
.ep-otp-send:hover:not(:disabled),
.ep-otp-verify:hover:not(:disabled) {
  background: rgba(0, 255, 65, 0.08);
}
.ep-otp-send:disabled,
.ep-otp-verify:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ep-otp-input {
  flex: 1;
  min-width: 0; /* same fix as ep-email-input — the Verify button must stay inside the viewport on narrow screens */
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 14px 16px;
  outline: none;
}
.ep-otp-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.18);
}

.ep-auth-status {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
}

.ep-auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ep-link-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.ep-link-btn:hover:not(:disabled) {
  color: var(--green);
}
.ep-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

.ep-auth-verified {
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 255, 65, 0.06);
  border: 1px solid var(--green);
}

.ep-auth-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ep-auth-email {
  flex: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-auth-change {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.ep-auth-change:hover {
  border-color: var(--green);
  color: var(--green);
}

.ep-auth-error {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #ff6666;
  background: rgba(255, 68, 68, 0.08);
  border: 1px solid rgba(255, 68, 68, 0.4);
  padding: 8px 10px;
}

/* ─── 07 ACTION BUTTONS ──────────────────────────────────────────────── */
.ep-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}

.ep-btn-secondary,
.ep-btn-primary {
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--border);
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.ep-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
}

.ep-btn-secondary:hover {
  border-color: var(--green-muted);
  background: rgba(0, 255, 65, 0.04);
}

.ep-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-btn-icon {
  font-size: 14px;
  color: var(--green);
}

.ep-btn-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  margin-left: 24px;
}

.ep-btn-primary {
  background: var(--tier-color, var(--green));
  color: #000;
  border-color: var(--tier-color, var(--green));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.18);
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.2s;
  animation: ep-btn-breathe 1.6s ease-in-out infinite;
}

.ep-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 65, 0.35);
}

.ep-btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  animation: none;
}

/* Breathe — primary CTA pulses its glow so it reads as a live,
   waiting action button rather than a static slab. */
@keyframes ep-btn-breathe {
  0%, 100% { box-shadow: 0 0 22px rgba(0, 255, 65, 0.18); }
  50%      { box-shadow: 0 0 48px rgba(0, 255, 65, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .ep-btn-primary { animation: none; }
}

.ep-btn-primary .ep-btn-icon {
  color: #000;
  font-size: 18px;
}

.ep-btn-stack {
  display: flex;
  flex-direction: column;
}

.ep-btn-title {
  font-size: 15px;
  font-weight: 700;
}

.ep-btn-skill {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

.ep-btn-bigprice {
  font-size: 28px;
  font-weight: 800;
}

.ep-actions-note {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 1px;
}

/* ─── ARCHITECTURE ───────────────────────────────────────────────────── */
.ep-arch {
  border-top: 1px solid var(--border);
  background: var(--bg-terminal);
  padding: 90px 0;
}

.ep-h2 {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  margin: 12px 0 14px;
  letter-spacing: -0.5px;
  text-shadow: 0 0 24px var(--green-glow);
}

.ep-h2-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--text-dim);
  text-shadow: none;
}

.ep-arch-sub {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 520px;
  margin-bottom: 48px;
  line-height: 1.7;
}

.ep-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.6fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 24px;
}

.ep-flow-box {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

.ep-flow-highlight {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.25);
}

.ep-flow-router {
  background: var(--bg);
}

.ep-flow-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.ep-flow-title {
  font-size: 13px;
  color: var(--green);
  margin-bottom: 4px;
}

.ep-flow-highlight .ep-flow-title { color: var(--green); }

.ep-flow-sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: auto;
}

.ep-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

.ep-flow-routes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-flow-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.ep-flow-route.is-active {
  opacity: 1;
}

.ep-flow-route-bar {
  width: 4px;
  height: 14px;
  background: var(--tier-color, var(--green));
  flex-shrink: 0;
}

.ep-flow-route-name {
  flex: 1;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-flow-route.is-active .ep-flow-route-name {
  color: var(--tier-color, var(--green));
}

.ep-flow-route-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.ep-arch-foot {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 760px;
  margin-top: 24px;
}

/* ─── OUTPUT PREVIEW ─────────────────────────────────────────────────── */
.ep-output {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 80px 0;
}

.ep-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.ep-output-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--green);
}

.ep-check {
  color: var(--green);
}

.ep-output-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.ep-output-tree {
  background: var(--bg-terminal);
  border-right: 1px solid var(--border);
  padding: 18px;
}

.ep-output-tree-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.ep-output-tree-body {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text);
  line-height: 1.7;
  white-space: pre;
}

.ep-output-summary {
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.ep-output-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ep-output-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ep-output-text code {
  color: var(--green);
  background: var(--bg-terminal);
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
}

/* Build-complete output preview is illustrative — buttons removed
   to avoid dead UI. Small label flags it as a marketing example
   so the missing CTAs read as "this is what you'll get" rather
   than broken interactivity. */
.ep-output-example-note {
  margin-top: auto;
  padding-top: 14px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ─── WHAT'S NEXT ────────────────────────────────────────────────────── */
.ep-next {
  border-top: 1px solid var(--border);
  background: var(--bg-terminal);
  padding: 90px 0;
}

.ep-next-sub {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 420px;
  margin-bottom: 40px;
  line-height: 1.7;
}

.ep-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ep-next-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 0.15s, border-color 0.15s;
  font-family: "JetBrains Mono", monospace;
  --next-accent: var(--green);
  color: inherit;
  text-decoration: none;
}

.ep-next-card[data-accent="mint"] { --next-accent: var(--tier-godmode-plus); }
.ep-next-card[data-accent="green"] { --next-accent: var(--tier-godmode); }
.ep-next-card[data-accent="amber"] { --next-accent: var(--tier-one-shot); }
.ep-next-card[data-accent="red"] { --next-accent: var(--tier-orchestra); }

.ep-next-card:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--next-accent);
}

.ep-next-highlight {
  border-color: var(--next-accent);
  box-shadow: 0 0 0 1px rgba(255, 51, 102, 0.18);
}

.ep-next-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ep-next-bar {
  width: 4px;
  height: 12px;
  background: var(--next-accent);
}

.ep-next-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
}

.ep-next-title {
  font-size: 15px;
  color: var(--next-accent);
  margin-bottom: 8px;
}

.ep-next-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 18px;
}

.ep-next-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ep-next-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.ep-next-cta {
  font-size: 12px;
  color: var(--next-accent);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ep-flow {
    grid-template-columns: 1fr;
  }
  .ep-flow-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
  .ep-output-card {
    grid-template-columns: 1fr;
  }
  .ep-output-tree {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 768px) {
  .ep-hero { padding: 24px 0 40px; }
  .ep-page-title-bar { padding: 72px 0 10px; }
  .ep-template-grid,
  .ep-dropdowns {
    grid-template-columns: repeat(2, 1fr);
  }
  .ep-actions {
    grid-template-columns: 1fr;
  }
  .ep-next-grid {
    grid-template-columns: 1fr;
  }
  .ep-plan-grid {
    grid-template-columns: 1fr;
  }
  .ep-tier {
    padding: 12px 14px;
    gap: 12px;
  }
  .ep-tier-bars { display: none; }
  /* Compress the sticky prompt on mobile so it doesn't eat the viewport.
     Top auto-tracks the sticky title bar height (incl subtitle line-height). */
  .ep-prompt-sticky {
    top: calc(85px + clamp(40px, 11vw, 92px) + clamp(16px, 2.24vw, 20.8px));
    padding: 16px 18px;
    min-height: 0;
    margin-bottom: 28px;
  }
  .ep-prompt-sticky .ep-prompt-text {
    font-size: 18px;
    line-height: 1.5;
  }
  .ep-prompt-sticky .ep-prompt-status {
    top: 6px;
    right: 10px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .ep-template-grid,
  .ep-dropdowns {
    grid-template-columns: 1fr;
  }
  .ep-stat-row {
    grid-template-columns: 1fr;
  }

  /* Plan-card header has 5 children (dot, title, copy, version, refines) — at
     ~375px the natural widths exceed the row, so wrap to a second line and
     align the secondary metadata to the trailing edge. */
  .ep-cc-plan-header {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .ep-cc-plan-header .ep-cc-plan-version,
  .ep-cc-plan-header .ep-cc-plan-refines {
    margin-left: auto;
  }
  .ep-cc-plan-header .ep-cc-plan-version + .ep-cc-plan-refines {
    margin-left: 8px;
  }

  /* Mobile-only overrides for the inline plan card options + copy button live
     near the end of the file (after the desktop .ep-cc-option rule) so they
     actually win on source order. */
}

/* ─── INLINE OUTPUT ─── */
.ep-output-inline {
  margin-top: 28px;
  background: var(--bg-terminal, #030803);
  border: 1px solid var(--green, #00ff41);
  box-shadow: 0 0 30px var(--green-glow, rgba(0, 255, 65, 0.12));
  position: relative;
}
.ep-output-inline[hidden] { display: none; }

.ep-output-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--green-dark, #064016);
  background: rgba(0, 255, 65, 0.04);
}

.ep-output-inline-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ep-output-inline-status.is-loading::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green, #00ff41);
  box-shadow: 0 0 8px var(--green, #00ff41);
  animation: ep-out-pulse 0.9s ease-in-out infinite;
}
.ep-output-inline-status.is-error   { color: #ff6b35; }
.ep-output-inline-status.is-success { color: var(--green, #00ff41); }
.ep-output-inline-status.is-info    { color: var(--text-dim, #00aa2a); }

@keyframes ep-out-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.4; }
}

.ep-output-inline-close {
  background: transparent;
  border: 0;
  color: var(--text-dim, #00aa2a);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  font-family: inherit;
  transition: color 0.15s;
}
.ep-output-inline-close:hover { color: var(--green, #00ff41); }

.ep-output-inline-body {
  margin: 0;
  padding: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text, #00ff41);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 480px;
  overflow-y: auto;
}
.ep-output-inline-body:empty { display: none; }

/* ─── CLAUDE-CODE-STYLE PLAN MODE ─────────────────────────────────────── */
/* Mirrors the bordered "Ready to code?" plan card from the Claude Code CLI.
   Lives inside .ep-output-inline so the close button + status header still
   work; we just swap the body layout when a plan is rendered. */

.ep-cc-plan {
  padding: 18px 18px 0;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text, #00ff41);
}

.ep-cc-plan-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.ep-cc-plan-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green, #00ff41);
  box-shadow: 0 0 10px var(--green, #00ff41);
}
.ep-cc-plan-title {
  color: var(--text, #00ff41);
  font-weight: 600;
}
.ep-cc-plan-version {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  opacity: 0.7;
}
.ep-cc-plan-refines {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  opacity: 0.7;
  padding: 2px 7px;
  border: 1px solid var(--green-dark, #064016);
  border-radius: 3px;
  background: rgba(0, 255, 65, 0.04);
}
.ep-cc-plan-refines.is-spent {
  color: #ffb347;
  border-color: rgba(255, 179, 71, 0.4);
  background: rgba(255, 179, 71, 0.08);
  opacity: 1;
}

.ep-cc-plan-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  padding: 3px 8px;
  border: 1px solid var(--green-dark, #064016);
  border-radius: 3px;
  background: rgba(0, 255, 65, 0.04);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ep-cc-plan-copy:hover {
  opacity: 1;
  color: var(--green, #00ff41);
  border-color: var(--green, #00ff41);
  background: rgba(0, 255, 65, 0.1);
}
.ep-cc-plan-copy:focus-visible {
  outline: 1px solid var(--green, #00ff41);
  outline-offset: 2px;
}
.ep-cc-plan-copy-icon {
  font-size: 11px;
  line-height: 1;
}
.ep-cc-plan-copy.is-copied {
  color: var(--green, #00ff41);
  border-color: var(--green, #00ff41);
  background: rgba(0, 255, 65, 0.15);
  opacity: 1;
}
.ep-cc-plan-copy.is-failed {
  color: #ffb347;
  border-color: rgba(255, 179, 71, 0.5);
  background: rgba(255, 179, 71, 0.1);
  opacity: 1;
}

/* When the copy button is present it owns the right-side push, so the
   version pill no longer needs margin-left:auto. */
.ep-cc-plan-header .ep-cc-plan-copy ~ .ep-cc-plan-version {
  margin-left: 0;
}

.ep-cc-plan-box {
  border: 1px solid var(--green-dark, #064016);
  border-radius: 6px;
  padding: 16px 18px;
  background: rgba(0, 255, 65, 0.025);
  font-size: 13.5px;
  line-height: 1.65;
  max-height: 420px;
  overflow-y: auto;
}

/* Inline markdown renderer output */
.ep-cc-plan-box h1,
.ep-cc-plan-box h2,
.ep-cc-plan-box h3 {
  color: var(--green, #00ff41);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 14px 0 6px;
  font-weight: 600;
  opacity: 0.85;
}
.ep-cc-plan-box h1:first-child,
.ep-cc-plan-box h2:first-child,
.ep-cc-plan-box h3:first-child { margin-top: 0; }
.ep-cc-plan-box p { margin: 0 0 10px; }
.ep-cc-plan-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 10px;
}
.ep-cc-plan-box li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}
.ep-cc-plan-box li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--text-dim, #00aa2a);
  opacity: 0.6;
}
.ep-cc-plan-box code {
  background: rgba(0, 255, 65, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
}
.ep-cc-plan-box strong { color: var(--green, #00ff41); }

/* Collapsible sections — sections beyond the first fold so options stay in view */
.ep-cc-plan-section {
  margin: 10px 0 0;
  border-top: 1px dashed rgba(0, 255, 65, 0.18);
  padding-top: 8px;
}
.ep-cc-plan-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  user-select: none;
  outline: none;
}
.ep-cc-plan-section > summary::-webkit-details-marker { display: none; }
.ep-cc-plan-section > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--green, #00ff41);
  opacity: 0.7;
  font-size: 11px;
  width: 10px;
  transition: transform 160ms ease;
}
.ep-cc-plan-section[open] > summary::before {
  transform: rotate(90deg);
}
.ep-cc-plan-section > summary:hover .ep-cc-plan-section-heading,
.ep-cc-plan-section > summary:focus-visible .ep-cc-plan-section-heading {
  opacity: 1;
}
.ep-cc-plan-section-heading {
  color: var(--green, #00ff41);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.ep-cc-plan-section[open] > summary { margin-bottom: 4px; }
.ep-cc-plan-section > *:not(summary) { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ep-cc-plan-section > summary::before,
  .ep-cc-plan-section-heading { transition: none; }
}

/* Prompt + numbered options — the part that mimics Claude Code's "❯ 1. Yes" UI */
.ep-cc-prompt {
  padding: 14px 18px 18px;
  border-top: 1px dashed var(--green-dark, #064016);
  margin-top: 18px;
}
.ep-cc-prompt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  margin-bottom: 10px;
}
.ep-cc-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-cc-option {
  display: grid;
  grid-template-columns: 18px 22px 1fr;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 7px 10px 7px 0;
  color: var(--text-dim, #00aa2a);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.ep-cc-option:hover {
  color: var(--text, #00ff41);
  background: rgba(0, 255, 65, 0.04);
}
.ep-cc-option-cursor {
  opacity: 0;
  color: var(--green, #00ff41);
  font-weight: 700;
  transition: opacity 0.12s;
}
.ep-cc-option-num {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.ep-cc-option.is-active {
  color: var(--text, #00ff41);
  background: rgba(0, 255, 65, 0.06);
}
.ep-cc-option.is-active .ep-cc-option-cursor { opacity: 1; }
.ep-cc-option.is-active .ep-cc-option-num { opacity: 0.85; }
.ep-cc-option.is-locked {
  color: var(--text-dim, #00aa2a);
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ep-cc-option.is-locked:hover {
  color: var(--text-dim, #00aa2a);
  background: transparent;
}
.ep-cc-option.is-locked .ep-cc-option-cursor { opacity: 0; }

.ep-cc-hint {
  margin-top: 12px;
  font-size: 10.5px;
  color: var(--text-dim, #00aa2a);
  opacity: 0.65;
  letter-spacing: 0.5px;
}
.ep-cc-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  background: rgba(0, 255, 65, 0.08);
  border: 1px solid var(--green-dark, #064016);
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  color: var(--text, #00ff41);
}

/* First-plan keyboard tip banner — fades after 5s via .is-fading.
   Sits between the plan body and the option prompt. */
.ep-cc-tip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 18px 4px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 255, 65, 0.45);
  border-radius: 4px;
  background: rgba(0, 255, 65, 0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text, #00ff41);
  letter-spacing: 0.4px;
  opacity: 0;
  transform: translateY(-3px);
  animation: ep-tip-banner-in 360ms ease-out forwards;
  transition: opacity 540ms ease, transform 540ms ease;
}
@keyframes ep-tip-banner-in {
  to { opacity: 1; transform: translateY(0); }
}
.ep-cc-tip-banner.is-fading {
  opacity: 0;
  transform: translateY(-3px);
}
.ep-cc-tip-banner-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--green, #00ff41);
  color: #050a05;
  font-weight: 700;
  flex: 0 0 auto;
}
.ep-cc-tip-banner-text { line-height: 1.5; }
.ep-cc-tip-banner kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  background: rgba(0, 255, 65, 0.18);
  border: 1px solid rgba(0, 255, 65, 0.5);
  border-radius: 3px;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--text, #00ff41);
}
@media (prefers-reduced-motion: reduce) {
  .ep-cc-tip-banner { animation: none; opacity: 1; transform: none; transition: opacity 200ms ease; }
}

/* Refinement input — surfaces when user picks "No, keep planning" */
.ep-cc-refine {
  padding: 14px 18px 18px;
  border-top: 1px dashed var(--green-dark, #064016);
}
.ep-cc-refine[hidden] { display: none; }
.ep-cc-refine-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, #00aa2a);
  margin-bottom: 10px;
}
.ep-cc-refine-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-terminal, #030803);
  border: 1px solid var(--green-dark, #064016);
  border-radius: 4px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.ep-cc-refine-input:focus-within {
  border-color: var(--green, #00ff41);
  box-shadow: 0 0 12px var(--green-glow, rgba(0, 255, 65, 0.2));
}
.ep-cc-refine-prompt {
  color: var(--green, #00ff41);
  font-weight: 700;
  line-height: 1.5;
  user-select: none;
}
.ep-cc-refine-textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--text, #00ff41);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 22px;
  max-height: 120px;
}
.ep-cc-refine-textarea::placeholder {
  color: var(--text-dim, #00aa2a);
  opacity: 0.5;
}
.ep-cc-refine-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--text-dim, #00aa2a);
  opacity: 0.7;
}
.ep-cc-refine-submit {
  background: transparent;
  border: 1px solid var(--green-dark, #064016);
  color: var(--text, #00ff41);
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ep-cc-refine-submit:hover:not(:disabled) {
  border-color: var(--green, #00ff41);
  background: rgba(0, 255, 65, 0.06);
}
.ep-cc-refine-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Loading state inside the plan card */
.ep-cc-loading {
  padding: 40px 18px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim, #00aa2a);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ep-cc-loading::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--green, #00ff41);
  box-shadow: 0 0 8px var(--green, #00ff41);
  animation: ep-out-pulse 0.9s ease-in-out infinite;
}

/* Skeleton placeholder rendered while a plan is generating/refining.
   Mirrors the structure of the eventual plan card so the user sees
   space being held for the real content. */
.ep-cc-skeleton .ep-cc-plan-header { margin-bottom: 14px; }
.ep-cc-skel-dot {
  background: var(--green-dark, #064016);
  box-shadow: none;
  animation: ep-skel-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes ep-skel-dot-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; box-shadow: 0 0 8px var(--green, #00ff41); }
}

.ep-cc-skel {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(0, 255, 65, 0.06);
}
.ep-cc-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 65, 0.14) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: ep-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes ep-skel-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ep-cc-skel-pill {
  margin-left: auto;
  width: 110px;
  height: 14px;
}
.ep-cc-skel-line {
  height: 11px;
  margin: 8px 0;
}
.ep-cc-skel-line.ep-cc-skel-h {
  height: 14px;
  margin: 14px 0 10px;
  background: rgba(0, 255, 65, 0.1);
}
.ep-cc-skel-w50  { width: 50%; }
.ep-cc-skel-w60  { width: 60%; }
.ep-cc-skel-w70  { width: 70%; }
.ep-cc-skel-w80  { width: 80%; }
.ep-cc-skel-w90  { width: 90%; }
.ep-cc-skel-w95  { width: 95%; }
.ep-cc-skel-w100 { width: 100%; }

.ep-cc-skel-box { padding: 14px 18px; }

@media (prefers-reduced-motion: reduce) {
  .ep-cc-skel-dot { animation: none; opacity: 0.6; }
  .ep-cc-skel::after { animation: none; }
}

/* Mobile tap-target bumps for the inline plan card. Placed at end-of-file so
   they override the desktop `.ep-cc-option` / `.ep-cc-plan-copy` rules
   without needing a higher-specificity selector. */
@media (max-width: 480px) {
  .ep-cc-option { padding: 11px 10px 11px 0; }
  .ep-cc-plan-copy { padding: 6px 10px; font-size: 11px; }

  /* Verified-and-signed-in row: at phone widths the pill + email + change
     button can't fit in one line, so the email got truncated to "get…".
     Wrap to a second line and give the email full width. */
  .ep-auth-verified {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .ep-auth-verified .ep-auth-email {
    flex-basis: 100%;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: clip;
    order: 2;
  }
  .ep-auth-verified .ep-auth-change {
    order: 1;
    margin-left: auto;
  }
}

/* ─── Worker status badge ─────────────────────────────────────────────── */
.ep-worker-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid var(--green-dark, #064016);
  border-radius: 4px;
  background: rgba(0, 255, 65, 0.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim, #00aa2a);
}
.ep-worker-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 5px currentColor;
}
.ep-worker-status[data-state="online"] .ep-worker-status-dot {
  background: var(--green, #00ff41);
  animation: ep-build-pulse 2s ease-in-out infinite;
}
.ep-worker-status[data-state="online"] {
  border-color: var(--green-dark, #064016);
  color: var(--green, #00ff41);
}
.ep-worker-status[data-state="offline"] .ep-worker-status-dot {
  background: #ffb347;
}
.ep-worker-status[data-state="offline"] {
  border-color: rgba(255, 179, 71, 0.4);
  background: rgba(255, 179, 71, 0.06);
  color: #ffb347;
}
@media (prefers-reduced-motion: reduce) {
  .ep-worker-status[data-state="online"] .ep-worker-status-dot { animation: none; }
}

/* ─── Stripe Elements payment section ─────────────────────────────────── */
.ep-pay {
  margin-top: 28px;
  background: var(--bg-terminal, #030803);
  border: 1px solid var(--green, #00ff41);
  box-shadow: 0 0 30px var(--green-glow, rgba(0, 255, 65, 0.12));
  padding: 22px;
  position: relative;
}
.ep-pay[hidden] { display: none; }
.ep-pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ep-pay-title {
  font-size: 16px;
  color: var(--green, #00ff41);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ep-pay-close {
  background: transparent;
  border: 0;
  color: var(--text-dim, #00aa2a);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  transition: color 0.15s;
}
.ep-pay-close:hover { color: var(--green, #00ff41); }

.ep-pay-summary {
  border: 1px dashed var(--green-dark, #064016);
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(0, 255, 65, 0.025);
}
.ep-pay-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}
.ep-pay-summary-row:last-child { margin-bottom: 0; }
.ep-pay-summary-label {
  color: var(--text-dim, #00aa2a);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  align-self: center;
}
.ep-pay-summary-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--green-dark, #064016);
}
.ep-pay-summary-price {
  font-size: 18px;
  color: var(--green, #00ff41);
  font-weight: 700;
}

.ep-pay-element {
  min-height: 60px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--green-dark, #064016);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.ep-pay-status {
  margin: 0;
  color: var(--text-dim, #00aa2a);
  font-size: 13px;
  font-style: italic;
}
.ep-pay-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(255, 102, 102, 0.08);
  border: 1px solid rgba(255, 102, 102, 0.4);
  color: #ff6666;
  font-size: 13px;
  border-radius: 4px;
}
.ep-pay-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: var(--green, #00ff41);
  color: var(--bg, #000);
  border: 1px solid var(--green, #00ff41);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}
.ep-pay-submit:hover:not(:disabled) {
  opacity: 0.92;
}
.ep-pay-submit:active:not(:disabled) { transform: translateY(1px); }
.ep-pay-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ep-pay-submit-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ep-pay-spin 0.7s linear infinite;
}
.ep-pay-submit.is-loading .ep-pay-submit-spinner { display: inline-block; }
.ep-pay-submit.is-loading .ep-pay-submit-label::after { content: "ing\2026"; }
@keyframes ep-pay-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ep-pay-submit-spinner { animation: none; }
}

.ep-pay-foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ─── Build status page (/easy-prompt-build.html) ─────────────────────── */
.ep-build-page { padding: 80px 0 60px; }
.ep-build-head { margin-bottom: 28px; }
.ep-build-sub {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ep-build-card {
  background: var(--bg-terminal, #030803);
  border: 1px solid var(--green, #00ff41);
  box-shadow: 0 0 30px var(--green-glow, rgba(0, 255, 65, 0.12));
  padding: 26px;
  margin-bottom: 24px;
}
.ep-build-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.ep-build-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 6px currentColor;
}
.ep-build-status-dot.is-amber  { background: #ffb347; }
.ep-build-status-dot.is-active { background: var(--green); animation: ep-build-pulse 1.4s ease-in-out infinite; }
.ep-build-status-dot.is-green  { background: var(--green); }
.ep-build-status-dot.is-red    { background: #ff6666; }
@keyframes ep-build-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-build-status-dot.is-active { animation: none; }
}
.ep-build-status-label { color: var(--green); font-weight: 600; }
.ep-build-phase { color: var(--text-muted); font-weight: 400; }

.ep-build-meta {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px dashed var(--green-dark, #064016);
  background: rgba(0, 255, 65, 0.025);
  margin-bottom: 22px;
}
.ep-build-meta-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  font-size: 13px;
}
.ep-build-meta-label {
  color: var(--text-dim, #00aa2a);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  align-self: center;
}
.ep-build-meta-value {
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-word;
}
.ep-build-meta-brief { font-size: 13px; line-height: 1.5; }

.ep-build-events {
  border-top: 1px dashed var(--green-dark, #064016);
  padding-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim, #00aa2a);
  max-height: 260px;
  overflow-y: auto;
}
.ep-build-events-empty { margin: 0; font-style: italic; opacity: 0.7; }
.ep-build-event {
  display: grid;
  grid-template-columns: 80px 110px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 255, 65, 0.08);
}
.ep-build-event:last-child { border-bottom: 0; }
.ep-build-event-ts { color: var(--text-muted); }
.ep-build-event-type { color: var(--green); }
.ep-build-event-msg { color: var(--text); word-break: break-word; }

.ep-build-actions {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--green-dark, #064016);
}
.ep-build-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--green, #00ff41);
  color: var(--bg, #000);
  text-decoration: none;
  border: 1px solid var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: opacity 0.15s, transform 0.05s;
}
.ep-build-download:hover { opacity: 0.92; }
.ep-build-download:active { transform: translateY(1px); }
.ep-build-actions-note {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.ep-build-error {
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(255, 102, 102, 0.06);
  border: 1px solid rgba(255, 102, 102, 0.4);
  color: #ff8888;
  font-size: 13px;
  line-height: 1.55;
}
.ep-build-error strong { color: #ff6666; }
.ep-build-error a { color: var(--green); }

.ep-build-foot {
  margin-top: 28px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.ep-build-foot a { color: var(--green); }

#ep-build-headline.is-celebrating {
  animation: ep-build-celebrate 1.2s ease-out;
  text-shadow: 0 0 18px var(--green);
}
@keyframes ep-build-celebrate {
  0% { transform: scale(1); }
  20% { transform: scale(1.04); }
  100% { transform: scale(1); }
}