.masterboard-page {
  margin-bottom: 18px;
}

.masterboard-app {
  --bg: #090909;
  --panel: #141414;
  --panel-2: #1c1c1c;
  --panel-3: #232323;
  --text: #f3f3f3;
  --muted: #b7b7b7;
  --muted-2: #8c8c8c;
  --line: #2f2f2f;
  --gold: #f7c948;
  --red: #ef5350;
  --yellow: #fbbf24;
  --blue: #60a5fa;
  --accent: #f3e2a2;
  --accent-warm: #f4eed7;
  --maxw: 1700px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.masterboard-app__startshell {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: 12px;
  align-items: stretch;
}

.masterboard-app__controlrail {
  display: grid;
  grid-template-columns: 0.95fr 1.3fr 0.95fr;
  gap: 12px;
  align-items: stretch;
}

.masterboard-app .guidebox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.masterboard-app .guidebox__lead {
  margin: 0 0 12px;
  color: #d8d2b8;
  font-size: 13px;
  line-height: 1.5;
  max-width: 58ch;
}

.masterboard-app .guidebox__lead--primary {
  color: #f6e2bf;
  font-weight: 600;
}

.masterboard-app .filterbox,
.masterboard-app .actionbox {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008));
}

.masterboard-app .titlebox--primary {
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(247, 201, 72, 0.08) inset;
}

.masterboard-app .filterbox--secondary,
.masterboard-app .actionbox--secondary,
.masterboard-app .guidebox--context {
  opacity: 0.94;
}

.masterboard-app .titlebox {
  background:
    radial-gradient(circle at top left, rgba(247, 201, 72, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.01)),
    var(--panel);
}

.masterboard-app .guidebox--blockers {
  background:
    radial-gradient(circle at top right, rgba(239, 83, 80, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--panel);
  border-color: rgba(239, 83, 80, 0.24);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(239, 83, 80, 0.08) inset;
}

.masterboard-app .guidebox--start {
  position: relative;
  overflow: hidden;
}

.masterboard-app .guidebox--start::before {
  content: "Primaerer Arbeitsstart";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.3);
  background: rgba(247, 201, 72, 0.12);
  color: #ffe6a1;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.masterboard-app .mode-switch {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 12px;
}

.masterboard-app .mode-hint {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(247, 201, 72, 0.18);
  background: rgba(247, 201, 72, 0.08);
  color: #efe1aa;
  font-size: 12px;
  line-height: 1.45;
}

.masterboard-app[data-mode="detail"] .mode-hint {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.08);
  color: #d9e9ff;
}

.masterboard-app .legend-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0.92;
}

.legend-dot,
.legend-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.legend-dot.is-red {
  background: rgba(239, 83, 80, 0.18);
  border: 1px solid rgba(239, 83, 80, 0.32);
}

.legend-dot.is-yellow {
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.32);
}

.legend-dot.is-green {
  background: rgba(103, 192, 103, 0.18);
  border: 1px solid rgba(103, 192, 103, 0.32);
}

.legend-mark {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: #d8d8d8;
}

.masterboard-app .blocker-list {
  display: grid;
  gap: 10px;
}

.masterboard-app .masterboard-top-summary {
  margin: 0 0 10px;
  color: #f3e2a2;
  line-height: 1.45;
  font-size: 13px;
  max-width: 58ch;
}

.masterboard-app .blocker-item {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 14px;
  padding: 12px;
}

.masterboard-app .blocker-item--button {
  width: 100%;
  text-align: left;
  padding: 16px 16px 16px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.masterboard-app .blocker-item--button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(239, 83, 80, 0.9), rgba(251, 191, 36, 0.9));
}

.masterboard-app .blocker-item--button:hover,
.masterboard-app .blocker-item--button:focus-visible {
  border-color: rgba(247, 201, 72, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.masterboard-app .blocker-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.masterboard-app .blocker-item__index {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 83, 80, 0.18);
  color: #ffc5c3;
  font-size: 12px;
  font-weight: 800;
}

.masterboard-app .blocker-item__title {
  font-weight: 800;
  color: var(--text);
  font-size: 19px;
  line-height: 1.15;
}

.masterboard-app .blocker-item__status,
.masterboard-app .blocker-item__meta,
.masterboard-app .card-next,
.masterboard-app .card-owner {
  font-size: 12px;
  color: var(--muted);
}

.masterboard-app .blocker-item__status {
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.masterboard-app .blocker-item__meta {
  color: #ddd2a0;
  line-height: 1.5;
  max-width: 70ch;
}

.masterboard-app .blocker-item__trail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.masterboard-app .titlebox,
.masterboard-app .filterbox,
.masterboard-app .actionbox,
.masterboard-app .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.masterboard-app .titlebox,
.masterboard-app .filterbox,
.masterboard-app .actionbox {
  padding: 16px;
}

.masterboard-app .filterbox,
.masterboard-app .actionbox {
  opacity: 0.94;
}

.masterboard-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.masterboard-source__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  font-weight: 700;
}

.masterboard-source__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.masterboard-source__badge.is-live {
  background: rgba(103, 192, 103, 0.14);
  border-color: rgba(103, 192, 103, 0.32);
  color: #9fe29f;
}

.masterboard-source__badge.is-fallback {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.32);
  color: #f8dd86;
}

.masterboard-source__badge.is-loading {
  color: #d8d8d8;
}

.masterboard-app .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d5d5d5;
  opacity: 0.8;
  margin-bottom: 8px;
  font-weight: 700;
}

.masterboard-app h2,
.masterboard-drawer h2 {
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 8px;
}

.masterboard-app .subtitle,
.masterboard-drawer .subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.masterboard-app .golden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(247, 201, 72, 0.12);
  border: 1px solid rgba(247, 201, 72, 0.28);
  color: #f8dd86;
  font-size: 12px;
  font-weight: 700;
}

.masterboard-app .masterboard-intent {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 60ch;
}

.masterboard-app .masterboard-intent--small {
  font-size: 12px;
}

.masterboard-app .filter-grid,
.masterboard-app .stats,
.masterboard-app .btnrow,
.masterboard-app .two {
  display: grid;
  gap: 10px;
}

.masterboard-app .filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.masterboard-app .btnrow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.masterboard-app .two {
  grid-template-columns: 1fr 1fr;
}

.masterboard-app .control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.masterboard-app .control span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  font-weight: 700;
}

.masterboard-app input,
.masterboard-app select,
.masterboard-app textarea,
.masterboard-drawer input,
.masterboard-drawer select,
.masterboard-drawer textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
}

.masterboard-app button,
.masterboard-drawer button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--accent);
  padding: 11px 12px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.masterboard-app button.primary,
.masterboard-drawer button.primary,
.masterboard-app .tab.active {
  background: linear-gradient(180deg, rgba(247, 201, 72, 0.18), rgba(247, 201, 72, 0.1));
  border-color: rgba(247, 201, 72, 0.35);
  color: black;
}

.masterboard-app .tab {
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.masterboard-app .mode-switch .tab {
  min-width: 104px;
  justify-content: center;
}

.masterboard-app[data-mode="lead"] .mode-switch .tab.active {
  box-shadow: 0 0 0 1px rgba(247, 201, 72, 0.18) inset;
}

.masterboard-app[data-mode="detail"] .mode-switch .tab.active {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.08));
  border-color: rgba(96, 165, 250, 0.34);
  color: #e7f1ff;
}

.masterboard-app .stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  opacity: 0.92;
}

.masterboard-app .stat .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bfbfbf;
  margin-bottom: 4px;
  font-weight: 700;
}

.masterboard-app .stat .v {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.masterboard-app .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.masterboard-app .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 12px;
  color: #d8d8d8;
}

.masterboard-app .board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.masterboard-app .lane {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    linear-gradient(180deg, #171717, #111111);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 14px 14px 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.masterboard-app .card-next {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(247, 201, 72, 0.16);
  background: linear-gradient(180deg, rgba(247, 201, 72, 0.12), rgba(247, 201, 72, 0.04));
  color: #f0e2a2;
  line-height: 1.45;
}

.masterboard-app .card-next__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe5a3;
  margin-bottom: 4px;
}

.masterboard-app .card-owner {
  margin-top: 4px;
}

.masterboard-app .card-role {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 201, 72, 0.82);
}

.masterboard-app .lane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 8px 8px 12px;
}

.masterboard-app .lane-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}

.masterboard-app .lane-sub,
.masterboard-app .small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.masterboard-drawer .small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.masterboard-app .lane-meta {
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.masterboard-app .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.masterboard-app .mb-card {
  --card-bg: linear-gradient(180deg, #202020, #171717);
  --card-line: #3a3a3a;
  --card-text: #f3f3f3;
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  color: var(--card-text);
  min-height: 218px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.masterboard-app .mb-card:hover,
.masterboard-app .mb-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.masterboard-app .mb-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.masterboard-app .badge,
.masterboard-app .pill,
.masterboard-app .mini {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.masterboard-app .badge {
  padding: 4px 10px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
}

.masterboard-app .mb-card .card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.masterboard-app .mb-card .card-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 8px;
  max-width: 13ch;
}

.masterboard-app .mb-card .card-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.35;
  margin-bottom: 2px;
}

.masterboard-app .mb-card .card-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
}

.masterboard-app .card-summary,
.masterboard-app .chip-list,
.masterboard-app .chip-list--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.masterboard-app .card-summary {
  margin-top: 10px;
  opacity: 0.88;
}

.masterboard-app .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.masterboard-app .chip-list--path {
  gap: 6px;
}

.masterboard-app .card-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.masterboard-app .card-section--path {
  background: rgba(255, 255, 255, 0.035);
  border-radius: 14px;
  padding: 12px;
  border-top: 0;
}

.masterboard-app .card-context {
  margin-top: auto;
  padding-top: 12px;
  opacity: 0.9;
}

.masterboard-app .card-section__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 6px;
  font-weight: 800;
}

.masterboard-app .mb-card .mini {
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}

.masterboard-app .mini--context {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  gap: 6px;
}

.masterboard-app .mini__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  opacity: 0.72;
}

.masterboard-app .workpath {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.masterboard-app .workpath__sep {
  color: rgba(255, 255, 255, 0.32);
  font-size: 14px;
  font-weight: 800;
}

.masterboard-app .workpath__step {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(243, 243, 243, 0.92);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.masterboard-app .workpath__step.is-static {
  cursor: default;
}

.masterboard-app .workpath__step-kicker {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.72;
}

.masterboard-app .workpath__step--node,
.masterboard-app .workpath__step--process {
  border-color: rgba(247, 201, 72, 0.22);
  background: rgba(247, 201, 72, 0.09);
  color: #fff0b5;
}

.masterboard-app .workpath__step--screen {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.09);
  color: #dcebff;
}

.masterboard-app .workpath__step--ref {
  border-color: rgba(255, 255, 255, 0.12);
}

.masterboard-drawer .mini {
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e7e7e7;
}

.masterboard-app .mini.is-good {
  background: rgba(103, 192, 103, 0.18);
  border-color: rgba(103, 192, 103, 0.28);
  color: #ccffd6;
}

.masterboard-drawer .mini.is-good {
  background: rgba(103, 192, 103, 0.2);
  border-color: rgba(103, 192, 103, 0.32);
  color: #d8ffe1;
}

.masterboard-app .mb-card .signals {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.masterboard-app .signal {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.masterboard-app .signal-risk {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(239, 83, 80, 1), rgba(194, 43, 39, 1));
  color: #fff;
}

.masterboard-app .signal-gap {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 1), rgba(222, 143, 0, 1));
  color: #3b2200;
}

.masterboard-app .signal-focus {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 1), rgba(33, 106, 200, 1));
  color: #fff;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.masterboard-app .mb-card.is-highlighted,
.masterboard-app .process-row.is-highlighted {
  box-shadow: 0 0 0 2px rgba(247, 201, 72, 0.4);
  border-color: rgba(247, 201, 72, 0.42);
}

.masterboard-app .flow-connector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 4px;
}

.masterboard-app .flow-connector .line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  flex: 1;
}

.masterboard-app .flow-connector .label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.masterboard-app .process-table {
  display: grid;
  grid-template-columns: 1.55fr 0.72fr 0.72fr 0.72fr 0.72fr 0.9fr 1fr;
  gap: 10px;
  align-items: center;
}

.masterboard-app .process-row,
.masterboard-app .process-head {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}

.masterboard-app .process-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  font-weight: 700;
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.08);
}

.masterboard-app .process-row {
  cursor: pointer;
  margin-top: 12px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.masterboard-app .process-row:hover,
.masterboard-app .process-row:focus-within {
  transform: translateY(-1px);
  border-color: rgba(247, 201, 72, 0.22);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.masterboard-app .process-primary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.masterboard-app .process-primary__role {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 201, 72, 0.82);
}

.masterboard-app .process-primary__problem {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239, 83, 80, 0.14);
  background: linear-gradient(180deg, rgba(239, 83, 80, 0.08), rgba(239, 83, 80, 0.02));
}

.masterboard-app .process-primary__problem-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffc8c6;
  font-weight: 800;
}

.masterboard-app .process-primary__next {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(247, 201, 72, 0.16);
  background: linear-gradient(180deg, rgba(247, 201, 72, 0.08), rgba(247, 201, 72, 0.03));
}

.masterboard-app .process-primary__next-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffe3a1;
  font-weight: 800;
}

.masterboard-app .process-primary__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.masterboard-app .process-primary__head > div:first-child {
  font-size: 20px;
  line-height: 1.1;
  color: var(--text);
}

.masterboard-app .process-row__meta {
  font-size: 12px;
  color: var(--muted-2);
}

.masterboard-app .process-row__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.masterboard-app .process-row__section--path {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.masterboard-app .process-row .small {
  color: #ddd2a0;
  line-height: 1.5;
}

.masterboard-app .process-row .chip--open {
  background: linear-gradient(180deg, rgba(247, 201, 72, 0.18), rgba(247, 201, 72, 0.08));
  border-color: rgba(247, 201, 72, 0.3);
  color: #fff1bc;
}

.masterboard-app .process-row > div:not(.process-primary) {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.masterboard-app .process-metric,
.masterboard-app .process-workbench {
  min-height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 8px;
}

.masterboard-app .process-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.masterboard-app .process-metric span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 800;
}

.masterboard-app .process-metric strong {
  font-size: 16px;
  color: var(--text);
  line-height: 1.1;
}

.masterboard-app .process-metric--priority strong {
  text-transform: capitalize;
  font-size: 15px;
}

.masterboard-app .process-workbench {
  display: flex;
  align-items: center;
  justify-content: center;
}

.masterboard-app .process-workbench .chip--open {
  width: 100%;
  justify-content: center;
  min-height: 42px;
}

.masterboard-app .pill {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.masterboard-app .chip {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(243, 243, 243, 0.92);
}

.masterboard-app .chip--path {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.masterboard-app .chip--node,
.masterboard-app .chip--process {
  border-color: rgba(247, 201, 72, 0.22);
  background: rgba(247, 201, 72, 0.09);
  color: #fff0b5;
}

.masterboard-app .chip--screen {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.09);
  color: #dcebff;
}

.masterboard-app .chip--ref {
  border-color: rgba(255, 255, 255, 0.12);
}

.masterboard-app .ok { color: #9cf7b4; }
.masterboard-app .mid { color: #ffe18a; }
.masterboard-app .bad { color: #ff9b9b; }

.masterboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: 0.24s opacity;
  z-index: 30;
}

.masterboard-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.masterboard-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(760px, 96vw);
  background:
    radial-gradient(circle at top right, rgba(247, 201, 72, 0.06), transparent 20%),
    linear-gradient(180deg, #151515, #0d0d0d);
  border-left: 1px solid var(--line);
  box-shadow: -26px 0 60px rgba(0, 0, 0, 0.44);
  transform: translateX(100%);
  transition: 0.24s transform;
  z-index: 40;
  display: flex;
  flex-direction: column;
  color: var(--accent-warm);
}

.masterboard-drawer.open {
  transform: translateX(0);
}

.masterboard-drawer__head {
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  background:
    radial-gradient(circle at top right, rgba(247, 201, 72, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(0, 0, 0, 0.18);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
}

.masterboard-drawer__body {
  padding: 22px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.masterboard-drawer label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.masterboard-drawer label span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  font-weight: 700;
}

.masterboard-drawer textarea {
  min-height: 100px;
  resize: vertical;
}

.masterboard-drawer .panel {
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.masterboard-drawer .panel-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.masterboard-drawer h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff6d2;
}

.masterboard-drawer .item {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f1f1;
  line-height: 1.45;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.masterboard-drawer .chip,
.masterboard-app .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(243, 243, 243, 0.9);
  font-size: 12px;
  font-weight: 800;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.masterboard-drawer .chip:hover,
.masterboard-app .chip:hover,
.masterboard-drawer .chip:focus-visible,
.masterboard-app .chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
}

.masterboard-drawer .chip__kicker,
.masterboard-app .chip__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(247, 201, 72, 0.14);
  color: #f8dd86;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.masterboard-drawer .chip--open,
.masterboard-app .chip--open,
.masterboard-drawer .chip--route,
.masterboard-app .chip--route {
  background: rgba(247, 201, 72, 0.12);
  border-color: rgba(247, 201, 72, 0.28);
  color: #ffe39b;
}

.masterboard-drawer .chip--db,
.masterboard-app .chip--db {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
}

.masterboard-drawer .chip--docs,
.masterboard-app .chip--docs {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.28);
}

.masterboard-drawer .chip--edge,
.masterboard-app .chip--edge,
.masterboard-drawer .chip--migration,
.masterboard-app .chip--migration {
  background: rgba(56, 189, 150, 0.12);
  border-color: rgba(56, 189, 150, 0.28);
}

.masterboard-drawer .chip--target,
.masterboard-app .chip--target {
  background: rgba(239, 83, 80, 0.12);
  border-color: rgba(239, 83, 80, 0.28);
}

.masterboard-drawer .screen-list {
  display: grid;
  gap: 10px;
}

.masterboard-drawer .screen-item {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.masterboard-drawer .screen-item__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.masterboard-drawer .screen-item__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.masterboard-drawer .workbench-hero {
  background:
    radial-gradient(circle at top right, rgba(247, 201, 72, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(247, 201, 72, 0.15), rgba(247, 201, 72, 0.045));
  border-color: rgba(247, 201, 72, 0.32);
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(247, 201, 72, 0.12) inset;
}

.masterboard-drawer .workbench-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.masterboard-drawer .workbench-kpi {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(247, 201, 72, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.masterboard-drawer .workbench-kpi span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #eadfb2;
  font-weight: 700;
}

.masterboard-drawer .workbench-kpi strong {
  font-size: 24px;
  line-height: 1.05;
  color: #fffbe8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.masterboard-drawer .workbench-next {
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(247, 201, 72, 0.3);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(247, 201, 72, 0.18), rgba(247, 201, 72, 0.055)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(247, 201, 72, 0.12) inset;
}

.masterboard-drawer strong,
.masterboard-drawer .eyebrow,
.masterboard-drawer .subtitle,
.masterboard-drawer .panel-head,
.masterboard-drawer .workbench-next,
.masterboard-drawer .workbench-next p,
.masterboard-drawer .workbench-kpi strong {
  color: var(--text);
}

.masterboard-drawer__head .eyebrow {
  color: #f0de9d;
  opacity: 1;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.masterboard-drawer__head h2 {
  color: #fff7de;
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.02;
  max-width: 14ch;
}

.masterboard-drawer__head .subtitle {
  color: #ddd0a1;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
}

.masterboard-drawer .panel-head .small,
.masterboard-drawer .screen-item .small,
.masterboard-drawer .item .small {
  color: #d8d8d8;
}

.masterboard-drawer .workbench-next .eyebrow {
  color: #f5de93;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.masterboard-drawer .workbench-next strong {
  display: block;
  font-size: 31px;
  line-height: 1.05;
  color: #fff8df;
  margin-bottom: 12px;
  max-width: 16ch;
}

.masterboard-drawer .workbench-next p,
.masterboard-drawer .workbench-next .subtitle {
  color: #f0e3b8;
  line-height: 1.55;
  font-size: 15px;
}

.masterboard-drawer .small {
  color: #d0d0d0;
}

.masterboard-drawer .panel > .small,
.masterboard-drawer .screen-list + .small,
.masterboard-drawer .chip-list + .small {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #dadada;
}

.masterboard-drawer .advanced-panel summary {
  cursor: pointer;
  font-weight: 700;
  color: #979797;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.masterboard-drawer .advanced-panel__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.masterboard-drawer .advanced-panel {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.004));
  opacity: 0.62;
  box-shadow: none;
}

.masterboard-app .c-marketing { --card-bg: linear-gradient(180deg, #61112d, #4d0f26); --card-line: #ba3d73; --card-text: #ffd9e7; }
.masterboard-app .c-entry { --card-bg: linear-gradient(180deg, #1d5a00, #134500); --card-line: #5bbc2d; --card-text: #e9ffd8; }
.masterboard-app .c-onboarding { --card-bg: linear-gradient(180deg, #083c73, #062f59); --card-line: #4797f0; --card-text: #d9ecff; }
.masterboard-app .c-config { --card-bg: linear-gradient(180deg, #352a7f, #2b226a); --card-line: #8c7df2; --card-text: #ece8ff; }
.masterboard-app .c-operativ { --card-bg: linear-gradient(180deg, #00564c, #004941); --card-line: #19b4a2; --card-text: #dbfffa; }
.masterboard-app .c-system { --card-bg: linear-gradient(180deg, #343434, #2a2a2a); --card-line: #8b8b8b; --card-text: #efefef; }
.masterboard-app .c-legal { --card-bg: linear-gradient(180deg, #734200, #5a3300); --card-line: #d48d14; --card-text: #fff0d1; }

@media (max-width: 1300px) {
  .masterboard-app__startshell,
  .masterboard-app__controlrail {
    grid-template-columns: 1fr;
  }

  .masterboard-app .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 980px) {
  .masterboard-app .cards,
  .masterboard-app .two,
  .masterboard-drawer .workbench-grid {
    grid-template-columns: 1fr;
  }

  .masterboard-app .process-table {
    grid-template-columns: 1fr;
  }

  .masterboard-app .process-head {
    display: none;
  }

  .masterboard-app .guidebox--start::before {
    position: static;
    display: inline-flex;
    margin-bottom: 12px;
  }
}

@media (max-width: 620px) {
  .masterboard-app .cards,
  .masterboard-app .filter-grid,
  .masterboard-app .btnrow {
    grid-template-columns: 1fr;
  }

  .masterboard-app h2,
  .masterboard-drawer h2 {
    font-size: 24px;
  }
}