.pif-app {
  --pif-hue1: var(--hue1, 176);
  --pif-hue2: var(--hue2, 40);
  --pif-hue3: var(--hue3, 210);

  --pif-c1: var(--ctl-c1, oklch(0.64 0.12 176));
  --pif-c2: var(--ctl-c2, oklch(0.72 0.14 40));
  --pif-c3: var(--ctl-c3, oklch(0.78 0.08 210));

  --pif-text: var(--text-high, #17242d);
  --pif-text-mid: var(--text-mid, #5e6a70);
  --pif-text-low: var(--text-low, #7e8a91);

  --pif-surface-0: var(--surface-0, #efe5d7);
  --pif-surface-1: var(--surface-1, #f4ede2);
  --pif-surface-2: var(--surface-2, #fbf6ef);
  --pif-surface-3: var(--surface-3, #fffaf4);

  --pif-border: var(--border, color-mix(in oklch, var(--pif-text) 14%, transparent));
  --pif-focus: var(--focus-ring, color-mix(in oklch, var(--pif-c1) 48%, transparent));
  --pif-focus-strong: var(--focus-ring-strong, color-mix(in oklch, var(--pif-c2) 52%, transparent));

  --pif-drop-sm: var(--drop-sm, 0 12px 26px hsl(var(--pif-hue1) 35% 18% / 0.12));
  --pif-drop-md: var(--drop-md, 0 18px 42px hsl(var(--pif-hue1) 35% 18% / 0.14));
  --pif-drop-lg: var(--drop-lg, 0 24px 80px hsl(var(--pif-hue1) 35% 18% / 0.16));

  --pif-shell-bg:
    radial-gradient(circle at top left, color-mix(in oklch, var(--pif-c1) 20%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 85% 12%, color-mix(in oklch, var(--pif-c2) 22%, transparent) 0%, transparent 26%),
    linear-gradient(145deg,
      color-mix(in oklch, var(--pif-surface-1) 92%, white 8%) 0%,
      color-mix(in oklch, var(--pif-surface-2) 96%, white 4%) 42%,
      color-mix(in oklch, var(--pif-surface-0) 94%, white 6%) 100%);

  --pif-panel-bg: color-mix(in oklch, var(--pif-surface-3) 86%, transparent);
  --pif-panel-strong: color-mix(in oklch, var(--pif-surface-3) 94%, transparent);
  --pif-panel-muted: color-mix(in oklch, var(--pif-surface-2) 80%, transparent);
  --pif-line-soft: color-mix(in oklch, var(--pif-border) 88%, transparent);
  --pif-accent-ink: color-mix(in oklch, var(--pif-c1) 56%, var(--pif-text));
  --pif-warm-ink: color-mix(in oklch, var(--pif-c2) 58%, var(--pif-text));
  --pif-console-bg: linear-gradient(180deg,
    color-mix(in oklch, var(--pif-surface-0) 82%, black 18%) 0%,
    color-mix(in oklch, var(--pif-surface-1) 74%, black 26%) 100%);

  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.5rem);
  border-radius: 28px;
  color: var(--pif-text);
  background: var(--pif-shell-bg);
  box-shadow: var(--pif-drop-lg);
  font-family: "Segoe UI Variable Text", "Avenir Next", "Trebuchet MS", sans-serif;
}

.pif-app::before,
.pif-app::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.pif-app::before {
  top: -120px;
  right: -90px;
  width: 320px;
  height: 320px;
  background: color-mix(in oklch, var(--pif-c3) 12%, white 88%);
  filter: blur(10px);
  opacity: 0.45;
}

.pif-app::after {
  bottom: -100px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: color-mix(in oklch, var(--pif-c1) 12%, transparent);
  filter: blur(6px);
}

.pif-app * {
  box-sizing: border-box;
}

.pif-hero,
.pif-workspace,
.pif-results {
  position: relative;
  z-index: 1;
}

.pif-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
  gap: 1.2rem;
  align-items: stretch;
  margin-bottom: 1.2rem;
}

.pif-hero__copy,
.pif-scoreboard,
.pif-panel {
  border: 1px solid color-mix(in oklch, var(--pif-border) 78%, white 22%);
  background: var(--pif-panel-bg);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  box-shadow: var(--pif-drop-md);
}

.pif-hero__copy {
  padding: clamp(1.5rem, 2vw, 2rem);
}

.pif-eyebrow,
.pif-panel__eyebrow,
.pif-summary__eyebrow {
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pif-accent-ink);
}

.pif-title {
  margin: 0;
  max-width: 13ch;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.pif-intro {
  margin: 1rem 0 0;
  max-width: 62ch;
  color: var(--pif-text-mid);
  font-size: 1rem;
  line-height: 1.7;
}

.pif-stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.pif-stage-strip span,
.pif-chip,
.pif-status-pill,
.pif-stage__status,
.pif-summary-card span,
.pif-signal span {
  border-radius: 999px;
}

.pif-stage-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  background: color-mix(in oklch, var(--pif-surface-3) 74%, transparent);
  border: 1px solid color-mix(in oklch, var(--pif-c1) 16%, var(--pif-border));
  font-size: 0.84rem;
  font-weight: 600;
}

.pif-scoreboard {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  align-content: start;
}

.pif-stat {
  padding: 1rem;
  border-radius: 18px;
  background: var(--pif-panel-strong);
  border: 1px solid var(--pif-line-soft);
}

.pif-stat__label,
.pif-summary-card span,
.pif-signal span,
.pif-summary__build span,
.pif-summary__next span {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pif-text-mid);
}

.pif-stat__value,
.pif-summary-card strong,
.pif-signal strong,
.pif-summary__build strong,
.pif-summary__next strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  line-height: 1.35;
}

.pif-workspace,
.pif-results,
.pif-columns,
.pif-columns--wide,
.pif-form__grid,
.pif-summary__grid,
.pif-signal-grid {
  display: grid;
  gap: 1rem;
}

.pif-workspace {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  margin-bottom: 1rem;
}

.pif-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pif-panel {
  padding: 1.15rem;
}

.pif-panel__header h2,
.pif-subtitle,
.pif-stage h3,
.pif-summary h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.pif-panel__header h2 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.1;
}

.pif-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.pif-field {
  display: grid;
  gap: 0.45rem;
}

.pif-field__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pif-text);
}

.pif-textarea {
  width: 100%;
  min-height: 170px;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--pif-border) 75%, var(--pif-c1) 8%);
  background:
    linear-gradient(180deg, color-mix(in oklch, white 34%, transparent), transparent),
    color-mix(in oklch, var(--pif-surface-3) 82%, transparent);
  color: var(--pif-text);
  resize: vertical;
  font: inherit;
  line-height: 1.6;
  box-shadow: 0 1px 0 color-mix(in oklch, white 55%, transparent) inset, var(--pif-drop-sm);
}

.pif-textarea:focus,
.pif-mode input:focus,
.pif-button:focus,
.pif-chip:focus {
  outline: 2px solid var(--pif-focus);
  outline-offset: 2px;
}

.pif-textarea--compact {
  min-height: 132px;
}

.pif-mode-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.pif-mode {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1rem 1rem 2.8rem;
  border-radius: 20px;
  border: 1px solid var(--pif-line-soft);
  background: color-mix(in oklch, var(--pif-surface-3) 74%, transparent);
  cursor: pointer;
}

.pif-mode input {
  position: absolute;
  top: 1.15rem;
  left: 1rem;
}

.pif-mode__title {
  font-weight: 700;
}

.pif-mode__body {
  color: var(--pif-text-mid);
  line-height: 1.55;
  font-size: 0.94rem;
}

.pif-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pif-chip {
  border: 1px solid color-mix(in oklch, var(--pif-c1) 18%, var(--pif-border));
  background: color-mix(in oklch, var(--pif-surface-3) 72%, transparent);
  color: var(--pif-accent-ink);
  padding: 0.6rem 0.95rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.pif-chip:hover,
.pif-button:hover {
  transform: translateY(-1px);
}

.pif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pif-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.3rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.pif-button[disabled] {
  cursor: progress;
  opacity: 0.8;
}

.pif-button--primary {
  color: var(--btn-fg, #fff);
  background: var(--btn-bg,
    linear-gradient(135deg,
      color-mix(in oklch, var(--pif-c1) 92%, black),
      color-mix(in oklch, var(--pif-c2) 92%, black)));
  box-shadow: var(--btn-shadow, 0 16px 28px color-mix(in oklch, var(--pif-c1) 24%, transparent));
}

.pif-button--ghost {
  color: var(--pif-text);
  background: color-mix(in oklch, var(--pif-surface-3) 74%, transparent);
  border: 1px solid var(--pif-line-soft);
}

.pif-progress {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.pif-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.pif-status-pill {
  padding: 0.45rem 0.8rem;
  background: color-mix(in oklch, var(--pif-c1) 14%, transparent);
  color: var(--pif-accent-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.pif-progress__value {
  font-weight: 700;
  color: var(--pif-text);
}

.pif-progress__track {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--pif-text) 8%, transparent);
  overflow: hidden;
}

.pif-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--pif-c2) 78%, transparent) 0%,
    color-mix(in oklch, var(--pif-c1) 82%, transparent) 100%);
  transition: width 360ms ease;
}

.pif-stage-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.pif-stage {
  border-radius: 20px;
  padding: 1rem;
  border: 1px solid var(--pif-line-soft);
  background: color-mix(in oklch, var(--pif-surface-3) 72%, transparent);
  transform: translateY(0);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.pif-stage--pending {
  opacity: 0.78;
}

.pif-stage--complete {
  border-color: color-mix(in oklch, var(--pif-c1) 26%, var(--pif-border));
  background: color-mix(in oklch, var(--pif-c1) 8%, var(--pif-surface-3));
  transform: translateY(-2px);
}

.pif-stage__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.pif-stage__index {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--pif-text-mid);
}

.pif-stage__status {
  padding: 0.38rem 0.7rem;
  background: color-mix(in oklch, var(--pif-text) 8%, transparent);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pif-stage h3,
.pif-subtitle,
.pif-summary h3 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}

.pif-stage p,
.pif-stage__feedback,
.pif-live-feed,
.pif-list__item,
.pif-structure__item p,
.pif-summary__hero p,
.pif-summary__next strong,
.pif-summary-card strong,
.pif-signal strong {
  line-height: 1.6;
}

.pif-stage__feedback {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--pif-line-soft);
  color: var(--pif-text-mid);
}

.pif-live-feed {
  margin-top: 1rem;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid color-mix(in oklch, var(--pif-border) 82%, transparent);
  background: var(--pif-console-bg);
  color: color-mix(in oklch, var(--pif-text) 88%, white 12%);
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 0.9rem;
}

.pif-feed-line + .pif-feed-line {
  margin-top: 0.65rem;
}

.pif-feed-line--success {
  color: color-mix(in oklch, var(--pif-c1) 56%, white 44%);
}

.pif-feed-line--error {
  color: color-mix(in oklch, var(--pif-c2) 58%, white 42%);
}

.pif-summary {
  display: grid;
  gap: 1rem;
}

.pif-summary__hero,
.pif-summary__next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-radius: 18px;
  background: color-mix(in oklch, var(--pif-surface-3) 74%, transparent);
  border: 1px solid var(--pif-line-soft);
}

.pif-summary__hero h3 {
  margin-bottom: 0.35rem;
}

.pif-summary__build {
  min-width: 180px;
}

.pif-summary__grid,
.pif-signal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pif-summary-card,
.pif-signal,
.pif-list__item,
.pif-structure__item {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--pif-line-soft);
  background: color-mix(in oklch, var(--pif-surface-3) 72%, transparent);
}

.pif-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pif-columns--wide {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
}

.pif-list,
.pif-structure {
  display: grid;
  gap: 0.75rem;
}

.pif-list__empty,
.pif-summary__empty,
.pif-structure__empty {
  padding: 1rem;
  border-radius: 18px;
  background: color-mix(in oklch, var(--pif-surface-3) 58%, transparent);
  border: 1px dashed color-mix(in oklch, var(--pif-border) 88%, transparent);
  color: var(--pif-text-mid);
}

.pif-structure__item code {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in oklch, var(--pif-text) 8%, transparent);
  color: var(--pif-text);
  font-size: 0.88rem;
}

.pif-app.is-running .pif-panel--process {
  box-shadow: 0 18px 48px color-mix(in oklch, var(--pif-c1) 12%, transparent);
}

@media (max-width: 1080px) {
  .pif-hero,
  .pif-workspace,
  .pif-results,
  .pif-columns,
  .pif-columns--wide,
  .pif-form__grid,
  .pif-mode-group,
  .pif-summary__grid,
  .pif-signal-grid {
    grid-template-columns: 1fr;
  }

  .pif-title {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .pif-app {
    padding: 1rem;
    border-radius: 22px;
  }

  .pif-panel,
  .pif-hero__copy,
  .pif-scoreboard {
    border-radius: 20px;
  }

  .pif-summary__hero,
  .pif-summary__next,
  .pif-progress__meta,
  .pif-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pif-button {
    width: 100%;
  }
}