/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Static values */
  --black:      #111111;
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 2px 8px rgba(0,0,0,.08);
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --nav-h:      56px;

  /* Light mode (default) */
  --bg:         #f5f5f5;
  --bg-2:       #ffffff;
  --bg-3:       #ebebeb;
  --border:     #d4d4d4;
  --border-2:   #e5e5e5;
  --text:       #1a1a1a;
  --text-2:     #404040;
  --text-3:     #737373;
  --text-4:     #a3a3a3;
  --done-green: #16a34a;
  --done-bg:    #f0fdf4;
  --done-border:#bbf7d0;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;
  --input-bg:   #ffffff;
  --nav-version:#999999;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:         #0f0f0f;
  --bg-2:       #1a1a1a;
  --bg-3:       #242424;
  --border:     #2e2e2e;
  --border-2:   #252525;
  --text:       #f0f0f0;
  --text-2:     #d4d4d4;
  --text-3:     #888888;
  --text-4:     #555555;
  --done-green: #22c55e;
  --done-bg:    #052e16;
  --done-border:#14532d;
  --danger:     #f87171;
  --danger-bg:  #450a0a;
  --input-bg:   #1e1e1e;
  --nav-version:#aaaaaa;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow:     0 2px 8px rgba(0,0,0,.4);
}

html { font-size: 16px; }
body { font-family: var(--font); color: var(--text); background: var(--bg);
       line-height: 1.5; -webkit-font-smoothing: antialiased;
       transition: background .2s, color .2s; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
textarea, input, select { font-family: inherit; font-size: inherit; }


/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h); background: var(--black); border-bottom: 1px solid #2a2a2a;
}
.nav__inner {
  max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav__brand { display: flex; align-items: center; gap: .75rem; }
.nav__logo  { height: 32px; width: auto; display: block; }
.nav__brand-sub {
  color: #777; font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  border-left: 1px solid #333; padding-left: .75rem; margin-left: .1rem;
}
.nav__right { display: flex; align-items: center; gap: 1.25rem; }
.nav__link  { color: #ccc; font-size: .875rem; transition: color .15s; }
.nav__link:hover { color: #fff; }
.nav__link--logout { color: #888; }
.nav__version {
  color: var(--nav-version); font-size: .72rem; font-family: var(--font-mono);
  letter-spacing: .04em; font-weight: 600;
}

/* ── Dark mode toggle ────────────────────────────────────── */
.theme-toggle {
  display: flex; align-items: center;
  width: 40px; height: 22px; background: #2a2a2a; border: 1px solid #444;
  border-radius: 99px; cursor: pointer; position: relative; transition: background .2s;
  flex-shrink: 0; padding: 0;
}
.theme-toggle::after {
  content: ''; position: absolute; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #777; transition: transform .25s, background .25s;
}
[data-theme="dark"] .theme-toggle { background: #3a3a3a; }
[data-theme="dark"] .theme-toggle::after { transform: translateX(18px); background: #fff; }

/* ── Layout ──────────────────────────────────────────────── */
.main      { padding: 2rem 0 4rem; min-height: calc(100vh - var(--nav-h)); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide   { max-width: 1300px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 720px;  margin: 0 auto; padding: 0 1.5rem; }
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.page-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.back-link { color: var(--text-3); font-size: .875rem; display: block; margin-bottom: .5rem; }
.back-link:hover { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn-primary { background: var(--black); color: #fff; border-color: var(--black); }
.btn-primary:hover { background: #333; border-color: #333; }
[data-theme="dark"] .btn-primary { background: #fff; color: #111; border-color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #ddd; border-color: #ddd; }
.btn-ghost  { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm   { padding: .35rem .8rem; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Login ───────────────────────────────────────────────── */
.login-page { background: var(--black); min-height: 100vh;
              display: flex; align-items: center; justify-content: center; }
.login-wrap { width: 100%; max-width: 380px; padding: 1rem; }
.login-logo { text-align: center; margin-bottom: 2.5rem; }
.login-logo__img { height: 60px; width: auto; margin: 0 auto; display: block; }
.login-logo .logo-sub {
  display: block; font-size: .72rem; font-weight: 500;
  color: #666; letter-spacing: .12em; text-transform: uppercase; margin-top: .85rem;
}
.login-form {
  background: #1a1a1a; border: 1px solid #2a2a2a;
  border-radius: var(--radius-lg); padding: 2rem;
}
.login-form .field + .field { margin-top: 1.25rem; }
.login-form .btn { margin-top: 1.75rem; padding: .7rem; font-size: 1rem; }

/* ── Forms ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
  padding: .5rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--input-bg); color: var(--text);
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--text-3);
}
.login-form .field input  { background: #222; border-color: #333; color: #f0f0f0; }
.login-form .field label  { color: #aaa; }
.login-form .field input:focus { border-color: #666; }
.required { color: var(--danger); }
.form-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-row .field { margin-bottom: 0; }
.form-card > .field { margin-bottom: 1.25rem; }
.form-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border-2);
}
.form-actions__right { display: flex; gap: .75rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding: .875rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .875rem; }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }

/* ── Dashboard grid ──────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.project-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem; transition: box-shadow .15s;
}
.project-card:hover { box-shadow: var(--shadow); }
.project-card--done { opacity: .65; }
.project-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.project-card__name   { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.project-card__client { color: var(--text-3); font-size: .875rem; margin-top: .15rem; }
.project-card__meta   { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.meta-link { color: var(--text-3); font-size: .8rem; text-decoration: underline;
             text-underline-offset: 2px; white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; max-width: 200px; }
.meta-tag  { background: var(--bg-3); color: var(--text-2); font-size: .75rem; padding: .15rem .5rem; border-radius: 4px; }
.project-card__actions { display: flex; gap: .5rem; margin-top: auto; }

/* ── Progress ────────────────────────────────────────────── */
.progress-wrap  { display: flex; flex-direction: column; gap: .35rem; }
.progress-bar   { background: var(--bg-3); border-radius: 99px; height: 6px; overflow: hidden; }
.progress-bar--lg { height: 8px; }
.progress-bar__fill { background: var(--black); height: 100%; border-radius: 99px; transition: width .3s; }
[data-theme="dark"] .progress-bar__fill { background: #e0e0e0; }
.progress-label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-3); }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem;
         border-radius: 99px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.badge--active { background: #1e3a5f; color: #60a5fa; border: 1px solid #1e40af; }
.badge--done   { background: var(--done-bg); color: var(--done-green); border: 1px solid var(--done-border); }
.badge--paused { background: #3a2a00; color: #fbbf24; border: 1px solid #92400e; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-3); }
.empty-state .btn { margin-top: 1rem; }

/* ── Project header ──────────────────────────────────────── */
.project-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.project-header h1 { font-size: 1.5rem; font-weight: 700; margin-top: .25rem; }
.project-client   { color: var(--text-3); font-size: .875rem; margin-top: .2rem; }
.project-client a { text-decoration: underline; text-underline-offset: 2px; color: var(--text-3); }
.project-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.project-progress-big { min-width: 240px; }
.project-progress-big .progress-label strong { color: var(--text); }

/* ── Phase nav pills ─────────────────────────────────────── */
.phase-nav {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
}
.phase-nav--sticky {
  position: sticky; top: var(--nav-h); z-index: 90; background: var(--bg);
  margin-bottom: 0; padding: .6rem 0; border-bottom: 1px solid var(--border);
  margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem;
}
.phase-pill {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .6rem;
  min-width: 52px; transition: background .15s, border-color .15s;
}
.phase-pill:hover   { background: var(--bg-3); border-color: var(--text-3); }
.phase-pill--done   { background: var(--done-bg); border-color: var(--done-border); }
.phase-pill--active { background: var(--black); border-color: var(--black); }
[data-theme="dark"] .phase-pill--active { background: #fff; border-color: #fff; }
.phase-pill--active .phase-pill__nr,
.phase-pill--active .phase-pill__pct { color: #fff; }
[data-theme="dark"] .phase-pill--active .phase-pill__nr,
[data-theme="dark"] .phase-pill--active .phase-pill__pct { color: #111; }
.phase-pill--done.phase-pill--active { background: var(--done-green); border-color: var(--done-green); }
.phase-pill--done.phase-pill--active .phase-pill__nr,
.phase-pill--done.phase-pill--active .phase-pill__pct { color: #fff; }
.phase-pill__nr  { font-size: .78rem; font-weight: 700; color: var(--text); }
.phase-pill__pct { font-size: .68rem; color: var(--text-3); }
.phase-pill--done .phase-pill__nr  { color: var(--done-green); }
.phase-pill--done .phase-pill__pct { color: var(--done-green); opacity: .7; }

/* ── Dashboard Quick-Nav button ──────────────────────────── */
.project-card__quicknav { margin-top: auto; }
.quicknav-btn {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .6rem .875rem; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  transition: background .15s, border-color .15s, color .15s; font-size: .875rem;
}
.quicknav-btn:hover { background: var(--black); border-color: var(--black); color: #fff; }
[data-theme="dark"] .quicknav-btn:hover { background: #fff; border-color: #fff; color: #111; }
.quicknav-btn--done {
  background: var(--done-bg); border-color: var(--done-border);
  color: var(--done-green); justify-content: center; font-weight: 500;
}
.quicknav-btn--done:hover { background: var(--done-green); border-color: var(--done-green); color: #fff; }
.quicknav-btn__label { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.quicknav-btn__phase { flex: 1; font-weight: 500; }
.quicknav-btn__sep   { color: var(--text-4); }
.quicknav-btn__arrow { color: var(--text-4); margin-left: auto; }

/* ── Phase sections ──────────────────────────────────────── */
.phase-section {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 1rem;
  overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 56px);
}
.phase-section--done { border-color: var(--done-border); }
.phase-section__header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; border-bottom: 1px solid var(--border-2);
}
.phase-section--done .phase-section__header { border-bottom-color: var(--done-border); }
.phase-nr {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 700; flex-shrink: 0;
}
[data-theme="dark"] .phase-nr { background: #e0e0e0; color: #111; }
.phase-section--done .phase-nr { background: var(--done-green); color: #fff; }
.phase-section__title { flex: 1; }
.phase-section__title h2 { font-size: 1rem; font-weight: 600; }
.phase-tool     { font-size: .75rem; color: var(--text-3); display: block; margin-top: .1rem; }
.phase-section__progress { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.phase-count  { font-size: .8rem; color: var(--text-3); }
.phase-toggle { background: none; border: none; padding: .25rem; color: var(--text-3); font-size: .875rem; line-height: 1; }
.phase-body   { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Checklist ───────────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: .35rem; }
.check-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--border-2); cursor: pointer;
  transition: background .12s; user-select: none;
}
.check-item:hover { background: var(--bg-3); }
.check-item--done { background: var(--done-bg); border-color: var(--done-border); }
.check-item--done:hover { filter: brightness(.96); }
.checkbox {
  width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--done-green);
  transition: border-color .12s, background .12s;
}
.checkbox--checked { background: var(--done-green); border-color: var(--done-green); color: #fff; }
.check-label { flex: 1; font-size: .875rem; color: var(--text); }
.check-item--done .check-label { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-4); }
.check-tool { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.check-ref {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text-2); padding: .15rem .5rem; border-radius: 4px;
  font-size: .72rem; font-family: var(--font-mono); white-space: nowrap; transition: background .12s;
}
.check-ref:hover { background: var(--black); color: #fff; border-color: var(--black); }
[data-theme="dark"] .check-ref:hover { background: #fff; color: #111; border-color: #fff; }

/* ── Phase notes ─────────────────────────────────────────── */
.note-field {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); resize: vertical; font-size: .875rem;
  color: var(--text); background: var(--bg-3); transition: border-color .15s;
}
.note-field:focus { outline: none; border-color: var(--text-3); background: var(--bg-2); }
.note-field::placeholder { color: var(--text-4); }

/* ── Prompts ─────────────────────────────────────────────── */
.prompts-heading { font-size: .875rem; font-weight: 600; color: var(--text-2); margin-bottom: .75rem; }
.prompts-list { display: flex; flex-direction: column; gap: .75rem; }
.prompt-card  { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.prompt-card__header {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .875rem; background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.prompt-ref   {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  background: var(--black); color: #fff; padding: .15rem .45rem; border-radius: 4px; flex-shrink: 0;
}
[data-theme="dark"] .prompt-ref { background: #e0e0e0; color: #111; }
.prompt-title { font-size: .875rem; font-weight: 500; flex: 1; color: var(--text); }
.prompt-copy  {
  background: none; border: 1px solid var(--border); padding: .2rem .6rem;
  border-radius: 4px; font-size: .75rem; color: var(--text-2); margin-left: auto; transition: background .12s;
}
.prompt-copy:hover { background: var(--bg-2); border-color: var(--text-3); }
.prompt-text {
  padding: .875rem; font-family: var(--font-mono); font-size: .78rem;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: var(--bg-2); line-height: 1.6;
}
.prompt-text--modal { max-height: 55vh; overflow-y: auto; }
.prompt-note {
  padding: .5rem .875rem; font-size: .8rem; color: var(--text-3);
  font-style: italic; background: var(--bg-3); border-top: 1px solid var(--border);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200;
         display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.modal__box {
  position: relative; background: var(--bg-2);
  border-radius: var(--radius-lg); width: 100%; max-width: 680px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
}
.modal__header {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem; background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.modal__close { background: none; border: none; font-size: 1rem; color: var(--text-3); margin-left: auto; padding: .25rem; line-height: 1; }
.modal__close:hover { color: var(--text); }
.modal__footer { padding: .875rem 1rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300;
  background: var(--black); color: #fff;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-size: .875rem; box-shadow: var(--shadow); animation: toast-in .2s ease;
}
[data-theme="dark"] .toast { background: #e0e0e0; color: #111; }
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Release Notes ───────────────────────────────────────── */
.page-sub { color: var(--text-3); font-size: .875rem; margin-top: .25rem; }
.current-version {
  background: var(--black); color: #fff; font-family: var(--font-mono); font-size: .8rem;
  padding: .35rem .75rem; border-radius: var(--radius); align-self: flex-start;
}
[data-theme="dark"] .current-version { background: #e0e0e0; color: #111; }
.changelog  { display: flex; flex-direction: column; gap: 1rem; }
.cl-title   { display: none; }
.cl-release { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cl-release__title {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .875rem 1.25rem; font-size: 1rem; font-weight: 600;
  background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.cl-version {
  font-family: var(--font-mono); font-size: .9rem;
  background: var(--black); color: #fff; padding: .2rem .6rem; border-radius: 4px;
}
[data-theme="dark"] .cl-version { background: #e0e0e0; color: #111; }
.cl-date  { font-size: .8rem; color: var(--text-3); font-weight: 400; font-family: var(--font-mono); }
.cl-list  { list-style: none; padding: .875rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.cl-list li { font-size: .875rem; color: var(--text-2); padding-left: 1.1rem; position: relative; }
.cl-list li::before { content: '–'; position: absolute; left: 0; color: var(--text-4); }

.form-section { margin-bottom: 2rem; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section__title {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
  padding-bottom: .75rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-2);
}
.field-hint {
  font-size: .78rem; color: var(--text-4); margin-top: .25rem;
  display: block;
}

/* ── Filled placeholder highlight ────────────────────────── */
.prompt-text mark {
  background: transparent;
  color: var(--done-green);
  font-weight: 600;
}

/* ── Context / Tool-Wechsel Seite ────────────────────────── */
.ctx-generator {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem;
}
.ctx-generator__header { margin-bottom: 1rem; }
.ctx-generator__title  { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.ctx-generator__desc   { font-size: .875rem; color: var(--text-3); }
.ctx-project-select    { margin-bottom: 1rem; }
.ctx-project-select select {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--input-bg); color: var(--text);
  font-size: .875rem;
}
.ctx-block {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.ctx-block--empty { opacity: .5; }
.ctx-block__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .875rem; background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.ctx-block__label { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.ctx-block__text {
  padding: 1rem; font-family: var(--font-mono); font-size: .78rem;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: var(--bg-2); line-height: 1.7; margin: 0;
  max-height: 320px; overflow-y: auto;
}
.ctx-block__text--placeholder { color: var(--text-4); }

.ctx-rule {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--done-bg); border: 1px solid var(--done-border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2rem;
  font-size: .875rem; color: var(--text);
}
.ctx-rule__icon {
  width: 24px; height: 24px; border-radius: 50%; background: var(--done-green);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: .1rem;
}

.ctx-section-title {
  font-size: 1.1rem; font-weight: 700; margin: 2rem 0 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.ctx-desc { font-size: .875rem; color: var(--text-3); margin-bottom: 1rem; }
.field-label { font-size: .875rem; font-weight: 500; color: var(--text-2);
               display: block; margin-bottom: .4rem; }

/* Tools grid */
.ctx-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.ctx-tool {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ctx-tool__header {
  padding: .75rem 1rem; font-weight: 700; font-size: .95rem;
  display: flex; justify-content: space-between; align-items: center;
}
.ctx-tool__header--chat   { background: #1e3a5f; color: #93c5fd; }
.ctx-tool__header--design { background: #3b1f5e; color: #c4b5fd; }
.ctx-tool__header--code   { background: #1a3a2a; color: #86efac; }
.ctx-tool__name { font-weight: 700; }
.ctx-tool__tag  { font-size: .72rem; font-weight: 400; opacity: .8; }
.ctx-tool__body { padding: 1rem; }
.ctx-tool__desc { font-size: .8rem; color: var(--text-2); margin-bottom: .75rem; }
.ctx-tool__list { list-style: none; padding: 0; }
.ctx-tool__list li {
  font-size: .78rem; color: var(--text-3); padding: .2rem 0 .2rem .9rem;
  position: relative;
}
.ctx-tool__list li::before { content: '–'; position: absolute; left: 0; color: var(--text-4); }

/* Routes */
.ctx-routes { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.ctx-route  {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ctx-route__header {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; font-weight: 700;
}
.ctx-route__header--chat-design  { background: #1e2a4a; color: #a5b4fc; }
.ctx-route__header--chat-code    { background: #1a2e1a; color: #86efac; }
.ctx-route__header--design-code  { background: #2a1a3a; color: #c4b5fd; }
.ctx-route__header--design-chat  { background: #2a1a3a; color: #93c5fd; }
.ctx-route__header--code-chat    { background: #1a2e1a; color: #93c5fd; }
.ctx-route__header--code-design  { background: #1a2e1a; color: #c4b5fd; }
.ctx-route__from  { font-size: .95rem; }
.ctx-route__arrow { font-size: 1.1rem; opacity: .7; }
.ctx-route__to    { font-size: .95rem; }
.ctx-route__body  { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.ctx-route__when  { font-size: .875rem; color: var(--text-2); }
.ctx-route__mitgeben { font-size: .875rem; color: var(--text-2); }
.ctx-route__mitgeben ul { list-style: none; padding: 0; margin-top: .35rem; }
.ctx-route__mitgeben li {
  font-size: .82rem; color: var(--text-3); padding: .15rem 0 .15rem .9rem; position: relative;
}
.ctx-route__mitgeben li::before { content: '✓'; position: absolute; left: 0; color: var(--done-green); font-size: .72rem; }
.ctx-route__prompt-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ctx-route__prompt-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .875rem; background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  font-size: .78rem; color: var(--text-3);
}
.ctx-route__prompt {
  padding: .875rem; font-family: var(--font-mono); font-size: .75rem;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: var(--bg-2); line-height: 1.6; margin: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .project-header { flex-direction: column; }
  .project-header__right { align-items: flex-start; width: 100%; }
  .project-progress-big { min-width: 0; width: 100%; }
  .check-tool { display: none; }
}