/* ── Wizard ── */
.wizard-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:flex; align-items:center; justify-content:center; }
.wizard-overlay[hidden] { display:none; }
.wizard-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:36px 40px; max-width:460px; width:calc(100% - 32px); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.new-project-card { max-width:620px; display:flex; flex-direction:column; gap:12px; padding:28px 32px; }
.new-project-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.new-project-header .wizard-title { margin-bottom:4px; }
.new-project-card .wizard-sub { margin-bottom:0; }
.new-project-scroll { display:flex; flex-direction:column; gap:12px; min-width:0; }
.new-project-card .config-row input,.new-project-card .config-row select,.new-project-card .config-row textarea { width:100%; }
.new-project-progress { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.np-step-pill { align-items:center; background:var(--control-bg); border:1px solid var(--border-soft); border-radius:8px; color:var(--text-dim); display:flex; font-size:11px; font-weight:700; gap:6px; min-width:0; padding:8px 10px; }
.np-step-pill span { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-step-pill.active { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 3px rgba(91,110,245,.12); }
.np-step-pill.done { border-color:rgba(34,197,94,.42); color:var(--green); }
.np-wizard-step { display:flex; flex-direction:column; gap:12px; }
.np-wizard-step[hidden] { display:none; }
.np-step-heading { border-bottom:1px solid var(--border-soft); padding-bottom:10px; }
.np-step-heading p { color:var(--text-dim); font-size:12px; line-height:1.45; margin:4px 0 0; }
.np-problem-input { min-height:150px; resize:vertical; }
.np-onboarding-section { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--border-soft); border-radius:8px; background:var(--control-bg); }
.np-section-title { color:var(--text); font-size:12px; font-weight:700; }
.np-close-btn { width:32px; height:32px; padding:0; font-size:22px; line-height:1; align-items:center; justify-content:center; }
.np-namespace-status { display:flex; align-items:center; gap:8px; min-height:24px; font-size:11px; color:var(--text-dim); margin-top:4px; }
.np-namespace-status[hidden] { display:none; }
.np-namespace-error { font-size:11px; color:var(--red); margin-top:2px; }
.np-create-status { border:1px solid var(--border); border-radius:8px; background:var(--surface2); padding:12px 14px; font-size:12px; line-height:1.45; }
.np-create-status-title { font-weight:700; color:var(--text); }
.np-create-status-detail { color:var(--text-dim); margin-top:2px; }
.np-create-steps { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.np-create-steps li { display:grid; grid-template-columns:14px 1fr; gap:8px; color:var(--text-dim); }
.np-step-marker { width:10px; height:10px; border-radius:50%; border:1px solid var(--border); margin-top:4px; background:var(--surface); }
.np-step-label { display:block; color:var(--text); }
.np-step-detail { display:block; color:var(--text-dim); font-size:11px; margin-top:1px; overflow-wrap:anywhere; }
.np-step-links { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:4px; font-size:11px; }
.np-step-links a { color:var(--accent); text-decoration:none; overflow-wrap:anywhere; }
.np-step-links a:hover { text-decoration:underline; }
.np-create-steps li.current .np-step-marker { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 3px rgba(91,110,245,.16); }
.np-create-steps li.success .np-step-marker { border-color:var(--green); background:var(--green); }
.np-create-steps li.warning .np-step-marker { border-color:#f59e0b; background:#f59e0b; }
.np-create-steps li.error .np-step-marker { border-color:var(--red); background:var(--red); }
.np-create-steps li.error .np-step-label,.np-create-steps li.error .np-step-detail { color:var(--red); }
.np-create-steps li.warning .np-step-label { color:#f59e0b; }
.np-create-next { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); color:var(--text); }
.wizard-title { font-size:20px; font-weight:700; margin-bottom:8px; color:var(--text); }
.wizard-sub { font-size:14px; color:var(--text-dim); margin-bottom:28px; line-height:1.6; }
.wizard-provider-row { display:flex; gap:12px; margin-bottom:16px; }
.wizard-provider-opt { position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); border-radius:8px; padding:12px; cursor:pointer; text-align:center; font-size:13px; transition:border-color .15s,background .15s; color:var(--text); }
.wizard-provider-opt.selected { border-color:var(--accent); background:rgba(91,110,245,.08); }
.wizard-provider-opt:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.wizard-provider-opt input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.wizard-project-choice { border:1px solid var(--border-soft); border-radius:8px; background:var(--control-bg); margin-top:14px; padding:12px; }
.wizard-project-choice-title { color:var(--text); font-size:12px; font-weight:700; margin-bottom:8px; }
.wizard-project-options { display:flex; flex-direction:column; gap:8px; }
.wizard-project-option { align-items:flex-start; border:1px solid var(--border-soft); border-radius:8px; cursor:pointer; display:flex; gap:10px; padding:10px; }
.wizard-project-option:focus-within { border-color:rgba(56,189,248,.72); box-shadow:0 0 0 3px rgba(14,165,233,.16); }
.wizard-project-option input { accent-color:var(--accent); flex:0 0 auto; margin-top:3px; }
.wizard-project-option-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wizard-project-option-text strong,
.wizard-project-option-text span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wizard-project-option-text span { color:var(--text-dim); font-size:12px; }
.wizard-actions { display:flex; justify-content:flex-end; margin-top:24px; gap:10px; }

.page-help-card {
  max-width: 520px;
  padding: 28px 32px;
}

.page-help-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.page-help-head .wizard-title {
  margin-bottom: 10px;
}

.page-help-close {
  align-items: center;
  flex: 0 0 auto;
  font-size: 22px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.page-help-body {
  margin-bottom: 0;
}

/* ── Error hint ── */
.error-hint { font-size:12px; color:var(--text-dim); margin-top:4px; }

/* ── Help tooltip ── */
.help-btn { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); font-size:9px; color:var(--text-dim); cursor:pointer; margin-left:4px; vertical-align:middle; line-height:1; user-select:none; }
.help-btn:hover { border-color:var(--accent); color:var(--accent); }
.help-tooltip { position:absolute; z-index:1100; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-size:12px; color:var(--text); max-width:260px; line-height:1.5; box-shadow:0 4px 16px rgba(0,0,0,.25); pointer-events:none; }
.help-tooltip.flow-tooltip { max-width:min(360px, calc(100vw - 16px)); white-space:pre-line; }
.help-tooltip.project-count-tooltip { max-width:min(220px, calc(100vw - 16px)); }

/* ── Auto schedule toggle ── */
.auto-toggle-label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; margin-bottom:8px; }
.auto-toggle-label input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; }
.auto-category-options { display:grid; gap:2px; }

/* ── Appweiter Startseiten-Look ─────────────────────────────────────────── */

.layout {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 220px),
    transparent;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
    rgba(13, 17, 23, .94);
  border-right-color: var(--border-soft);
  box-shadow: 12px 0 36px rgba(0,0,0,.18);
}

body.light .sidebar {
  background:
    linear-gradient(180deg, rgba(14,165,233,.06), rgba(255,255,255,0) 36%),
    rgba(255,255,255,.94);
  box-shadow: 12px 0 36px rgba(15,23,42,.06);
}

.sidebar-header,
.sidebar-footer {
  border-color: var(--border-soft);
}

.sidebar-title {
  background: linear-gradient(90deg, var(--accent-h), #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-h);
}

.search,
.config-row input,
.config-row select,
.config-panel textarea,
.analyze-count-select,
#logDateSelect,
.cost-control input,
.cost-control select {
  background: var(--control-bg);
  border-color: var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.search:focus,
.config-row input:focus,
.config-row select:focus,
.config-panel textarea:focus,
.analyze-count-select:focus,
#logDateSelect:focus,
.cost-control input:focus,
.cost-control select:focus {
  border-color: rgba(56, 189, 248, .72);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .16), inset 0 1px 0 rgba(255,255,255,.04);
}

.project-list {
  padding: 8px;
}

.project-item {
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin-bottom: 3px;
  padding: 9px 10px;
}

.project-item:hover {
  background: var(--panel-bg-soft);
  border-color: var(--border-soft);
}

.project-item.active {
  background: linear-gradient(145deg, var(--accent-soft), rgba(255,255,255,0) 52%), var(--control-bg);
  border-color: var(--border-soft);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.btn-settings {
  background: rgba(20, 29, 46, .34);
  border-color: var(--border-soft);
  border-radius: 8px;
  margin-top: 7px;
}

body.light .btn-settings {
  background: rgba(240, 249, 255, .7);
}

.theme-toggle {
  background: var(--control-bg);
  border-color: var(--border-soft);
  border-radius: 8px;
  width: 100%;
}

.main {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, .08), transparent 34%),
    radial-gradient(circle at 8% 60%, rgba(34, 197, 94, .045), transparent 28%);
}

.project-view,
.global-settings-view {
  padding: 24px 28px 28px;
}

.app-page-header {
  align-items: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: visible;
  padding: 18px 20px;
  position: relative;
}

.app-page-header::before {
  background: linear-gradient(90deg, var(--accent), rgba(56,189,248,.1));
  content: '';
  height: 3px;
  left: 18px;
  opacity: .9;
  position: absolute;
  right: 18px;
  top: 0;
}

.project-header-left {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-title-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.app-page-kicker {
  color: var(--accent-h);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-page-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
}

.project-name {
  line-height: 1.25;
}

.project-header-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.config-panel,
.issue-card,
.flow-column,
.flow-card,
.cost-stat,
.log-box,
.cost-table-wrap,
.toast,
.wizard-card,
.cost-budget-note,
.cost-data-note {
  background: var(--panel-bg);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.config-panel {
  position: relative;
  overflow: hidden;
}

.config-panel::before {
  background: linear-gradient(180deg, var(--accent), transparent);
  content: '';
  inset: 12px auto 12px 0;
  opacity: .34;
  position: absolute;
  width: 3px;
}

.config-panel > * {
  position: relative;
  z-index: 1;
}

.idea-panel {
  background:
    linear-gradient(145deg, rgba(14,165,233,.12), rgba(34,197,94,.045) 54%, rgba(255,255,255,0)),
    rgba(13, 17, 23, .9);
  border-left-color: var(--accent);
}

body.light .idea-panel {
  background:
    linear-gradient(145deg, rgba(14,165,233,.1), rgba(34,197,94,.05) 54%, rgba(255,255,255,0)),
    rgba(255,255,255,.94);
}

.btn {
  border-radius: 8px;
  transition: opacity .15s, background .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.btn:not(:disabled):hover {
  opacity: 1;
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  box-shadow: 0 10px 24px rgba(14,165,233,.18);
}

.btn-secondary,
.btn-ghost,
.time-slot,
.flow-column-count,
.schedule-pill {
  background: var(--control-bg);
  border-color: var(--border-soft);
}

.btn-ghost:hover,
.btn-secondary:hover {
  border-color: rgba(56,189,248,.52);
}

.warning-bar,
.merge-queue-bar,
.idea-result {
  background: var(--panel-bg-soft);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.section-title {
  color: var(--text-dim);
}

.log-header {
  background: rgba(20, 29, 46, .34);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 12px;
}

body.light .log-header {
  background: rgba(255,255,255,.72);
}

.process-flow {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,0) 38%),
    rgba(13, 17, 23, .58);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin: 8px 0 12px;
  padding: 10px;
}

body.light .process-flow {
  background: rgba(255,255,255,.76);
}

.process-board {
  background: rgba(13, 17, 23, .22);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 6px;
}

body.light .process-board {
  background: rgba(241,245,249,.72);
}

.flow-column {
  background: rgba(20, 29, 46, .62);
  overflow: hidden;
}

body.light .flow-column {
  background: rgba(255,255,255,.86);
}

.flow-column-head {
  background: rgba(255,255,255,.025);
  border-bottom-color: var(--border-soft);
}

.flow-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,0) 42%),
    rgba(13, 17, 23, .9);
  border-color: var(--border-soft);
}

body.light .flow-card {
  background:
    linear-gradient(145deg, rgba(14,165,233,.05), rgba(255,255,255,0) 42%),
    rgba(255,255,255,.94);
}

.issue-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,0) 38%),
    rgba(13, 17, 23, .9);
  border-color: var(--border-soft);
}

body.light .issue-card {
  background:
    linear-gradient(145deg, rgba(14,165,233,.05), rgba(255,255,255,0) 38%),
    rgba(255,255,255,.94);
}

.cost-summary {
  gap: 10px;
}

.cost-stat {
  min-width: 136px;
}

.cost-table-wrap {
  background: rgba(13,17,23,.62);
}

body.light .cost-table-wrap {
  background: rgba(255,255,255,.78);
}

.cost-table th {
  background: rgba(255,255,255,.025);
}

.wizard-overlay {
  background:
    radial-gradient(circle at 20% 0%, rgba(14,165,233,.22), transparent 36%),
    rgba(0,0,0,.68);
}

.wizard-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: var(--glow);
}

.wizard-provider-opt {
  background: var(--control-bg);
  border-color: var(--border-soft);
}

.wizard-provider-opt.selected {
  background: linear-gradient(145deg, var(--accent-soft), rgba(255,255,255,0) 54%), var(--control-bg);
}

.toast {
  background: var(--panel-bg);
  border-color: var(--border-soft);
  box-shadow: var(--glow);
}

/* ── Startseiten-Übersicht ───────────────────────────────────────────────── */

.empty-state.overview-active {
  justify-content: flex-start;
  align-items: stretch;
}

.overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.overview-intro-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.overview-intro-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 480px;
}

.overview-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: flex-start;
}

.overview-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.overview-stat.stat-running .overview-stat-value { color: var(--yellow); }
.overview-stat.stat-ready   .overview-stat-value { color: var(--accent); }
.overview-stat.stat-review  .overview-stat-value { color: #a855f7; }
.overview-stat.stat-cost-exceeded {
  border-color: rgba(239, 68, 68, .6);
}
.overview-stat.stat-cost-exceeded .overview-stat-value { color: var(--red); }

.overview-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.overview-stat-label {
  font-size: 11px;
  color: var(--text-xdim);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.overview-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse 1.5s infinite;
  display: inline-block;
}

.overview-stat-loading {
  font-size: 18px;
  color: var(--text-xdim);
}

.overview-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 12px 28px 0;
}

.overview-layout-hint {
  color: var(--text-xdim);
  font-size: 11px;
  line-height: 1.3;
}

.overview-layout-switch {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex;
  padding: 3px;
}

.overview-layout-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-height: 28px;
  padding: 0 11px;
  transition: background .12s, color .12s;
}

.overview-layout-btn:hover {
  color: var(--text);
}

.overview-layout-btn.active {
  background: var(--accent-soft);
  color: var(--accent-h);
}

.overview-layout-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.overview-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-xdim);
  padding: 16px 28px 0;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  padding: 12px 28px 28px;
}

.overview-implementation-chart {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin: 0 28px 28px;
  padding: 16px;
}

.overview-chart-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.overview-chart-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

.overview-chart-sub {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 3px;
}

.overview-chart-summary {
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  min-width: 86px;
  padding: 8px 10px;
  text-align: center;
}

.overview-chart-summary strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.overview-chart-summary span {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
}

.overview-chart-kpis {
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.overview-chart-body {
  display: grid;
  gap: 8px;
}

.overview-chart-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 82px minmax(120px, 1fr) 34px minmax(130px, 240px) 48px;
}

.overview-chart-date,
.overview-chart-count,
.overview-chart-time {
  font-variant-numeric: tabular-nums;
}

.overview-chart-date {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.overview-chart-bar-wrap {
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.overview-chart-bar {
  display: flex;
  height: 100%;
  min-width: 4px;
  overflow: hidden;
}

.overview-chart-segment {
  display: block;
  height: 100%;
  min-width: 4px;
}

.overview-chart-count {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-align: right;
}

.overview-chart-meta,
.overview-chart-time,
.overview-chart-empty,
.overview-chart-loading {
  color: var(--text-dim);
  font-size: 12px;
}

.overview-chart-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-chart-time {
  text-align: right;
}

.overview-chart-empty {
  background: var(--surface2);
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  line-height: 1.45;
  padding: 14px;
}

.overview-chart-loading {
  margin-top: 10px;
}

.overview-tile {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,0) 38%),
    var(--surface);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 158px;
  overflow: hidden;
  padding: 16px;
  position: relative;
  transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.overview-tile::after {
  background: radial-gradient(circle at top right, rgba(14, 165, 233, .16), transparent 46%);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .16s;
}
.overview-tile:hover {
  border-color: rgba(14, 165, 233, .56);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.overview-tile:hover::after { opacity: 1; }
.overview-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .24), var(--shadow-sm);
  outline: none;
}
.overview-tile.tile-running {
  border-color: rgba(245,158,11,.38);
  background:
    linear-gradient(145deg, rgba(245,158,11,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}
.overview-tile.tile-deploying {
  border-color: rgba(99,102,241,.38);
  background:
    linear-gradient(145deg, rgba(99,102,241,.10), rgba(255,255,255,0) 42%),
    var(--surface);
}
.overview-tile.tile-analyzing {
  animation: analyze-tile-pulse 1.8s ease-in-out infinite;
  border-color: rgba(245,158,11,.38);
  background:
    linear-gradient(145deg, rgba(245,158,11,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}
.overview-tile.tile-ready {
  border-color: rgba(14,165,233,.34);
  background:
    linear-gradient(145deg, rgba(14,165,233,.1), rgba(255,255,255,0) 42%),
    var(--surface);
}
.overview-tile.tile-review {
  border-color: rgba(168,85,247,.4);
  background:
    linear-gradient(145deg, rgba(168,85,247,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}
body.light .overview-tile {
  background:
    linear-gradient(145deg, rgba(14, 165, 233, .06), rgba(255,255,255,0) 38%),
    var(--surface);
  border-color: rgba(15, 23, 42, .1);
}
body.light .overview-tile.tile-running {
  background:
    linear-gradient(145deg, rgba(245,158,11,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}
body.light .overview-tile.tile-analyzing {
  background:
    linear-gradient(145deg, rgba(245,158,11,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}
body.light .overview-tile.tile-ready {
  background:
    linear-gradient(145deg, rgba(14,165,233,.09), rgba(255,255,255,0) 42%),
    var(--surface);
}
body.light .overview-tile.tile-review {
  background:
    linear-gradient(145deg, rgba(168,85,247,.12), rgba(255,255,255,0) 42%),
    var(--surface);
}

.overview-tile-accent {
  background: var(--text-xdim);
  border-radius: 999px;
  height: 3px;
  left: 16px;
  opacity: .45;
  position: absolute;
  right: 16px;
  top: 0;
}
.overview-tile.tile-running .overview-tile-accent { background: var(--yellow); opacity: .9; }
.overview-tile.tile-analyzing .overview-tile-accent { background: var(--yellow); opacity: .9; }
.overview-tile.tile-ready .overview-tile-accent { background: var(--accent); opacity: .85; }
.overview-tile.tile-review .overview-tile-accent { background: #a855f7; opacity: .9; }

.overview-tile-head {
  align-items: flex-start;
  display: flex;
  gap: 11px;
  min-width: 0;
  padding-right: 36px;
  position: relative;
  z-index: 1;
}

.overview-tile-mark {
  align-items: center;
  background: var(--surface2);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  color: var(--text-dim);
  display: flex;
  flex: 0 0 34px;
  font-size: 12px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  line-height: 1;
}
.overview-tile.tile-running .overview-tile-mark {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.3);
  color: var(--yellow);
}
.overview-tile.tile-analyzing .overview-tile-mark {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.3);
  color: var(--yellow);
}
.overview-tile.tile-ready .overview-tile-mark {
  background: rgba(14,165,233,.13);
  border-color: rgba(14,165,233,.3);
  color: var(--accent-h);
}
.overview-tile.tile-review .overview-tile-mark {
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.3);
  color: #c084fc;
}

.overview-tile-title {
  min-width: 0;
  flex: 1;
}

.overview-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-tile-ns {
  font-size: 11px;
  color: var(--text-xdim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-tile-desc {
  color: var(--text-dim);
  flex-grow: 1;
  font-size: 12px;
  line-height: 1.5;
  margin-top: -2px;
  min-height: 36px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.overview-tile-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.overview-tile-meta {
  color: var(--text-xdim);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 6px;
  line-height: 1.2;
}

.overview-tile-meta span {
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-tile-meta .overview-meta-warning {
  border-color: rgba(245, 158, 11, .32);
  color: var(--yellow);
}

.overview-tile-desc + .overview-tile-footer {
  margin-top: 0;
}

.overview-tile-status {
  align-items: center;
  align-self: flex-start;
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 999px;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  line-height: 1;
  padding: 6px 9px;
}
.overview-tile-status.running {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.28);
  color: var(--yellow);
}
.overview-tile-status.analyzing {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.28);
  color: var(--yellow);
}
.overview-tile-status.ready {
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.25);
  color: var(--accent-h);
}
.overview-tile-status.review {
  background: rgba(168,85,247,.13);
  border-color: rgba(168,85,247,.28);
  color: #c084fc;
}
.overview-tile-status.idle    { color: var(--text-xdim); }

.overview-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse 1.5s infinite;
  display: inline-block;
  flex-shrink: 0;
}

.overview-mini-bar {
  height: 3px;
  background: rgba(91,110,245,.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

.overview-mini-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .5s ease;
  min-width: 4px;
}

.overview-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  z-index: 2;
}
.overview-badge.ready   { background: var(--accent); color: #fff; }
.overview-badge.review  { background: #a855f7; color: #fff; }
.overview-badge.running { background: var(--yellow); color: #111827; animation: pulse 1.5s infinite; }
.overview-badge.deploying {
  background: rgba(99, 102, 241, .16);
  border: 1px solid rgba(99, 102, 241, .32);
  color: #818cf8;
  padding: 5px;
}
.overview-badge.analyzing {
  background: rgba(245, 158, 11, .16);
  border: 1px solid rgba(245, 158, 11, .32);
  color: var(--yellow);
  padding: 5px;
}

.overview-folders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 28px 28px;
}

.overview-folder {
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

body.light .overview-folder {
  border-color: rgba(15, 23, 42, .1);
}

.overview-folder-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  list-style: none;
  min-height: 44px;
  padding: 10px 14px;
}

.overview-folder-summary::-webkit-details-marker {
  display: none;
}

.overview-folder-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.overview-folder-icon {
  color: var(--text-xdim);
  font-size: 13px;
  transform: rotate(90deg);
  transition: transform .12s;
}

.overview-folder:not([open]) .overview-folder-icon {
  transform: rotate(0deg);
}

.overview-folder-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-folder-count {
  color: var(--text-xdim);
  font-size: 11px;
  white-space: nowrap;
}

.overview-folder-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.overview-folder-badge,
.overview-compact-count {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 999px;
  color: var(--text-xdim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.overview-folder-badge.active {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.28);
  color: var(--yellow);
}

.overview-folder-badge.ready,
.overview-compact-count.ready {
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.25);
  color: var(--accent-h);
}

.overview-folder-badge.review,
.overview-compact-count.review {
  background: rgba(168,85,247,.13);
  border-color: rgba(168,85,247,.28);
  color: #c084fc;
}

.overview-folder-badge.error,
.overview-compact-count.error {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.26);
  color: #f87171;
}

.overview-compact-count.backlog {
  background: rgba(148, 163, 184, .08);
  color: var(--text-xdim);
}

.overview-folder-projects {
  border-top: 1px solid rgba(148, 163, 184, .14);
  display: flex;
  flex-direction: column;
}

.overview-compact-row {
  align-items: center;
  background: rgba(255,255,255,.015);
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(180px, 1fr) minmax(130px, auto) minmax(160px, auto);
  min-height: 58px;
  padding: 10px 14px;
  transition: background .12s, border-color .12s;
}

.overview-compact-row:last-child {
  border-bottom: none;
}

.overview-compact-row:hover {
  background: rgba(14, 165, 233, .07);
}

.overview-compact-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.overview-compact-row.tile-running,
.overview-compact-row.tile-analyzing {
  background: rgba(245,158,11,.06);
}

.overview-compact-row.tile-ready {
  background: rgba(14,165,233,.045);
}

.overview-compact-row.tile-review {
  background: rgba(168,85,247,.055);
}

.overview-compact-mark {
  align-items: center;
  background: var(--surface2);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  color: var(--text-dim);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.overview-compact-main {
  min-width: 0;
}

.overview-compact-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-compact-desc {
  color: var(--text-xdim);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-compact-status {
  justify-self: start;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-compact-meta {
  align-items: center;
  color: var(--text-xdim);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 5px;
  justify-content: flex-end;
  min-width: 0;
}

.overview-compact-meta > span:not(.overview-compact-count) {
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 999px;
  max-width: 160px;
  overflow: hidden;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes analyze-tile-pulse {
  0%, 100% {
    box-shadow: var(--shadow-sm), 0 0 0 0 rgba(245, 158, 11, .2);
  }
  50% {
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(245, 158, 11, .08);
  }
}

/* ── DW-Kanban Overview (webinar-dev Widget-Style) ──────────────────────── */

.dw-ov-panel {
  margin: 24px 28px;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1117;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 24px 64px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.dw-ov-bar {
  height: 42px;
  background: #161c28;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: .75rem;
  flex-shrink: 0;
}

.dw-ov-dots { display: flex; gap: 6px; }
.dw-ov-dots span { width: 12px; height: 12px; border-radius: 50%; }
.dw-ov-dots span:nth-child(1) { background: #ff5f57; }
.dw-ov-dots span:nth-child(2) { background: #febc2e; }
.dw-ov-dots span:nth-child(3) { background: #28c840; }

.dw-ov-title {
  flex: 1;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(148,163,184,.45);
  letter-spacing: .04em;
}

.dw-ov-live-badge {
  font-size: .63rem;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: .06em;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  padding: .15rem .55rem;
  border-radius: 99px;
}

.dw-ov-stats {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.dw-ov-stat {
  flex: 1;
  padding: .85rem 1rem;
  border-right: 1px solid rgba(255,255,255,.05);
  text-align: center;
}
.dw-ov-stat:last-child { border-right: none; }

.dw-ov-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(90deg, #38bdf8, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.dw-ov-stat-val.green {
  background: linear-gradient(90deg, #4ade80, #86efac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dw-ov-stat-lbl {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(148,163,184,.4);
  margin-top: .3rem;
}

.dw-ov-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 180px;
  background-image: radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 20px 20px;
}

.dw-ov-col {
  padding: .85rem .95rem;
  border-right: 1px solid rgba(255,255,255,.05);
}
.dw-ov-col:last-child { border-right: none; }

.dw-ov-col-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(148,163,184,.45);
  margin-bottom: .65rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dw-ov-col-head.active { color: #7dd3fc; }
.dw-ov-col-head.done   { color: #86efac; }

.dw-ov-col-count {
  margin-left: auto;
  font-size: .58rem;
  font-weight: 700;
  background: rgba(255,255,255,.07);
  color: rgba(148,163,184,.5);
  padding: .08rem .42rem;
  border-radius: 99px;
}
.dw-ov-col-count.active { background: rgba(14,165,233,.18); color: #38bdf8; }
.dw-ov-col-count.done   { background: rgba(34,197,94,.14); color: #4ade80; }

.dw-ov-cards {
  display: flex;
  flex-direction: column;
  gap: .38rem;
}

.dw-ov-card {
  background: #141d2e;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: .55rem .7rem;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  animation: dw-ov-card-in .22s ease forwards;
}

@keyframes dw-ov-card-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.dw-ov-card:hover {
  border-color: rgba(14,165,233,.4);
  background: rgba(14,165,233,.07);
}

.dw-ov-card.running {
  border-color: rgba(14,165,233,.4);
  background: rgba(14,165,233,.07);
}

.dw-ov-card.idle { opacity: .62; }

.dw-ov-card-lbl {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3d5068;
  margin-bottom: .2rem;
}
.dw-ov-card.running .dw-ov-card-lbl { color: #38bdf8; }

.dw-ov-card-name {
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-ov-card.running .dw-ov-card-name { color: #7dd3fc; }

.dw-ov-card-sub {
  font-size: .58rem;
  color: #3d5068;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dw-ov-progress {
  margin-top: .42rem;
  height: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
}

.dw-ov-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0ea5e9, #93c5fd);
  animation: dw-ov-prog 3.2s ease-in-out infinite;
}

@keyframes dw-ov-prog {
  0%   { width: 5%;  }
  65%  { width: 78%; }
  92%  { width: 96%; }
  100% { width: 96%; }
}

.dw-ov-empty {
  font-size: .68rem;
  color: rgba(100,116,139,.35);
  font-style: italic;
  padding: .35rem 0;
}

.dw-ov-footer {
  border-top: 1px solid rgba(255,255,255,.04);
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dw-ov-footer-hint {
  font-size: .62rem;
  color: rgba(148,163,184,.3);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.dw-ov-footer-hint::before {
  content: '›';
  color: #0ea5e9;
  font-weight: 700;
  margin-right: .35rem;
}

.dw-ov-footer-stat {
  font-size: .62rem;
  color: rgba(148,163,184,.25);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

@media (max-width: 640px) {
  .layout { flex-direction: column; }
  .sidebar {
    height: auto;
    max-height: 38vh;
    min-width: 0;
    width: 100%;
  }
  .project-view { padding: 16px; }
  .project-header-actions,
  .flow-idea-header,
  .process-flow-header {
    align-items: stretch;
    flex-direction: column;
  }

  .view-switch {
    width: 100%;
  }

  .view-switch-btn {
    flex: 1;
  }

  .user-status-panel {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .user-status-panel {
    grid-template-columns: 1fr;
    padding: 16px;
  }

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

  .user-steps {
    grid-template-columns: 1fr;
  }

  .flow-idea-panel {
    padding: 14px;
  }

  .idea-form-grid,
  .analyze-row {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .idea-form-grid,
  .project-view.idea-mode .analyze-row {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .idea-panel {
    padding: 16px;
  }

  .project-view.idea-mode .idea-section {
    padding-left: 42px;
  }

  .project-view.idea-mode .idea-actions {
    grid-template-columns: 1fr;
  }

  .idea-compose {
    max-width: none;
  }

  .idea-actions {
    justify-content: stretch;
  }

  .idea-mobile-composer {
    align-items: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px 8px 0 0;
    bottom: 0;
    box-shadow: 0 -14px 36px rgba(0,0,0,.34);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(106px, .8fr) minmax(58px, auto) minmax(116px, 1fr);
    left: 0;
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    transition: transform .16s ease, visibility .16s ease;
    visibility: hidden;
    z-index: 320;
  }

  .idea-mobile-composer.is-visible {
    transform: translateY(0);
    visibility: visible;
  }

  .idea-mobile-category {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
    min-height: 40px;
    min-width: 0;
    outline: none;
    padding: 7px 8px;
    width: 100%;
  }

  .idea-mobile-category:focus {
    border-color: var(--accent);
  }

  .idea-mobile-meta {
    color: var(--text-xdim);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .idea-mobile-composer .btn {
    min-height: 40px;
    min-width: 0;
    padding: 7px 10px;
    width: 100%;
  }

  .idea-mobile-composer-spacer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .main {
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .idea-result,
  .issue-workflow {
    scroll-margin-block: calc(16px + env(safe-area-inset-top)) calc(112px + env(safe-area-inset-bottom));
  }

  .idea-panel .btn-compact,
  .analyze-row .btn,
  #ideaCategory,
  .analyze-category-select {
    width: 100%;
  }
  .process-phases,
  .process-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-board { grid-template-columns: 1fr; }
  .flow-column { min-height: 120px; }
  .issue-row { flex-direction: column; }
  .issue-actions,
  .error-actions,
  .done-actions,
  .ready-actions {
    align-items: stretch;
    width: 100%;
  }
  .dw-ov-panel { margin: 12px; }
  .dw-ov-board { grid-template-columns: 1fr; }
  .dw-ov-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .dw-ov-col:last-child { border-bottom: none; }
  .dw-ov-stats { flex-wrap: wrap; }
  .dw-ov-stat { min-width: 50%; }
  .overview-header {
    gap: 16px;
    padding: 20px 16px 16px;
  }
  .overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .overview-stat {
    min-width: 0;
    padding: 10px 12px;
  }
  .overview-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px 0;
  }
  .overview-layout-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .overview-layout-btn {
    width: 100%;
  }
  .overview-grid {
    grid-template-columns: 1fr;
    padding: 12px 16px 20px;
  }
  .overview-tile {
    min-height: 144px;
  }
  .overview-folders {
    padding: 12px 16px 20px;
  }
  .overview-implementation-chart {
    margin: 0 16px 20px;
    padding: 14px;
  }
  .overview-chart-head {
    align-items: stretch;
    flex-direction: column;
  }
  .overview-chart-summary {
    text-align: left;
  }
  .overview-chart-row {
    grid-template-columns: 70px minmax(0, 1fr) 28px;
  }
  .overview-chart-meta,
  .overview-chart-time {
    grid-column: 2 / -1;
  }
  .overview-chart-time {
    text-align: left;
  }
  .overview-folder-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .overview-folder-badges {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
  .overview-compact-row {
    align-items: flex-start;
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .overview-compact-status,
  .overview-compact-meta {
    grid-column: 2;
  }
  .overview-compact-meta {
    justify-content: flex-start;
  }

  .project-view {
    padding-top: 12px;
  }

  .mobile-project-context {
    align-items: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: -2px 0 12px;
    min-height: 52px;
    padding: 7px 8px 7px 12px;
    position: sticky;
    top: calc(0px + env(safe-area-inset-top));
    z-index: 170;
  }

  .mobile-project-context-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-project-context-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-project-context-meta {
    align-items: center;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 650;
    gap: 6px;
    line-height: 1.2;
    margin-top: 3px;
    min-width: 0;
  }

  .mobile-project-context-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-project-context-status.running,
  .mobile-project-context-status.analyzing {
    background: rgba(245, 158, 11, .16);
    color: var(--yellow);
  }

  .mobile-project-context-status.deploying {
    background: rgba(99, 102, 241, .16);
    color: #818cf8;
  }

  .mobile-project-context-status::before {
    background: currentColor;
    border-radius: 999px;
    content: '';
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
  }

  .mobile-project-context-status.running::before,
  .mobile-project-context-status.analyzing::before,
  .mobile-project-context-status.deploying::before {
    animation: pulse 1.5s infinite;
  }

  .mobile-project-context-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
  }

  .mobile-project-context-link {
    align-items: center;
    background: var(--control-bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--accent-h);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    line-height: 1;
    min-width: 38px;
    padding: 0 9px;
    text-decoration: none;
    touch-action: manipulation;
  }

  button.mobile-project-context-link {
    cursor: pointer;
    font-family: inherit;
  }

  .mobile-project-config-btn {
    color: var(--text);
    font-size: 11px;
    min-width: 56px;
  }

  .mobile-project-admin-btn {
    background: var(--accent);
    border-color: rgba(56,189,248,.58);
    color: #fff;
    font-size: 11px;
    min-width: 58px;
  }

  .mobile-project-actions-btn {
    color: var(--text);
    font-size: 11px;
    min-width: 70px;
  }

  .mobile-project-admin-btn[hidden],
  .mobile-project-actions-btn[hidden] {
    display: none !important;
  }

  .mobile-project-config-btn.needs-setup {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .38);
    color: var(--yellow);
  }

  .mobile-project-context-link:hover {
    border-color: rgba(56,189,248,.52);
    color: var(--text);
  }

  .mobile-project-context-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

@media (max-width: 900px) {
  .layout,
  .main,
  .project-view {
    min-width: 0;
  }

  .sidebar {
    width: 240px;
    min-width: 240px;
  }

  .project-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .project-header-left {
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .project-name {
    min-width: 0;
    max-width: 100%;
  }

  .project-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .project-header-actions > * {
    min-width: 0;
  }

  .project-header-actions .view-switch {
    flex: 1 1 180px;
  }

  .project-header-actions .admin-actions-menu {
    flex: 1 1 180px;
  }

  .project-header-actions .btn {
    flex: 1 1 180px;
    white-space: normal;
  }

  .project-header-actions .admin-actions-menu .btn {
    flex: none;
  }

  .admin-actions-trigger {
    width: 100%;
  }

  .admin-actions-menu.open .admin-actions-backdrop {
    background: rgba(0, 0, 0, .54);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 390;
  }

  .admin-actions-dropdown {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    gap: 8px;
    left: 0;
    max-height: calc(100dvh - 56px);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    top: auto;
    width: 100%;
    z-index: 400;
  }

  .admin-actions-close {
    align-self: stretch;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    color: var(--text-dim);
    cursor: pointer;
    display: block;
    font: inherit;
    font-weight: 650;
    min-height: 44px;
    padding: 0 12px;
    text-align: center;
  }

  .admin-actions-close:hover {
    background: var(--surface2);
    color: var(--text);
  }

  .admin-actions-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .admin-actions-dropdown .btn {
    min-height: 44px;
    white-space: normal;
  }

  .admin-actions-dropdown .merge-confirm {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .merge-confirm {
    align-items: stretch;
    flex: 1 1 100%;
    width: 100%;
  }

  #mergeConfirmText {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .merge-confirm-item,
  .merge-confirm-more {
    white-space: normal;
  }

  .log-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .log-progress {
    flex: 1 1 100%;
    order: 10;
  }

  .log-scroll-status {
    max-width: 100%;
  }

  .idea-form-grid {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .idea-form-grid,
  .project-view.idea-mode .analyze-row {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .idea-actions {
    grid-template-columns: 1fr;
  }

  .project-view.idea-mode .idea-section {
    padding-left: 44px;
  }

  .idea-compose {
    max-width: none;
  }

  .global-settings-view {
    padding: 14px;
  }

  .settings-panel,
  .settings-group,
  .config-panel {
    min-width: 0;
  }
}

@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden;
  }

  .layout {
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
  }

  .main {
    min-width: 0;
    overflow-x: hidden;
    scroll-padding-block: calc(12px + env(safe-area-inset-top)) calc(96px + env(safe-area-inset-bottom));
  }

  .project-view {
    min-width: 0;
    overflow-x: hidden;
    padding: 14px;
  }

  .app-page-header,
  .config-panel,
  .settings-group,
  .user-status-panel,
  .usage-stats-panel,
  #usage-summary-widget {
    max-width: 100%;
    min-width: 0;
  }

  #usage-summary-widget {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .process-flow {
    min-width: 0;
    overflow: hidden;
  }

  .process-flow-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .process-flow-legend {
    width: 100%;
  }

  .process-board {
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-auto-columns: minmax(260px, min(82vw, 340px));
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    width: 100%;
  }

  .flow-column {
    min-height: 140px;
    min-width: 0;
    scroll-snap-align: start;
  }

  .flow-card,
  .flow-card-top,
  .flow-card-actions,
  .flow-card-action-group {
    min-width: 0;
  }

  .flow-card-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .flow-card-link {
    flex-shrink: 1;
    overflow-wrap: anywhere;
  }

  .flow-card-title,
  .flow-card-desc {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .flow-card-actions {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }

  .flow-card-action-group {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
  }

  .flow-card-action-group.primary {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 8px;
  }

  .flow-card-primary-action,
  .flow-card-discard {
    min-height: 44px;
    white-space: normal;
  }

  .flow-card-status {
    line-height: 1.35;
  }

  .log-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .log-progress {
    flex: 1 1 240px;
  }

  #logDateSelect {
    flex: 1 1 160px;
  }

  .analyze-issue-row,
  .mr-entry {
    grid-template-columns: 1fr;
  }

  .analyze-issue-actions,
  .mr-entry {
    align-items: stretch;
  }

  .analyze-issue-action,
  .mr-entry .btn {
    justify-content: center;
    min-width: 0;
    white-space: normal;
  }

  .usage-stats-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  /* Flow-Board: Akkordeon statt seitliches Spalten-Scrolling. */
  .process-activity-list,
  .process-phases {
    grid-template-columns: 1fr;
  }

  .process-guide-steps {
    grid-template-columns: 1fr;
  }

  .process-guide-step {
    grid-template-columns: 1fr auto;
  }

  .process-guide-summary {
    padding: 9px 10px;
  }

  .process-guide-next {
    font-size: 13px;
  }

  .process-board {
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .flow-column-head {
    cursor: pointer;
    min-height: 52px;
    user-select: none;
  }

  .flow-column-head::after {
    color: var(--text-xdim);
    content: '▸';
    flex-shrink: 0;
    font-size: 11px;
    transition: transform .2s;
  }

  .flow-column.mobile-expanded .flow-column-head::after {
    transform: rotate(90deg);
  }

  .flow-column-body {
    display: none;
  }

  .flow-column.mobile-expanded .flow-column-body {
    display: flex;
  }
}

@media (max-width: 640px) {
  .usage-stats-table-wrap {
    overflow: visible;
  }

  .layout {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
  }

  .main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(128px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
  }

  #configPanel {
    padding-bottom: 0;
  }

  #configPanel .config-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .config-accordion-group,
  .config-advanced {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .config-accordion-group summary,
  .config-accordion-group.config-advanced summary {
    align-items: center;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.3;
    list-style: none;
    min-height: 46px;
    padding: 12px 12px;
    user-select: none;
  }

  .config-accordion-group summary::-webkit-details-marker {
    display: none;
  }

  .config-accordion-group summary::before {
    color: var(--text-dim);
    content: '▸';
    flex: 0 0 auto;
    transition: transform .15s;
  }

  .config-accordion-group[open] summary::before {
    transform: rotate(90deg);
  }

  .config-accordion-group summary > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .config-accordion-group[open] {
    padding-bottom: 12px;
  }

  .config-accordion-group[open] summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }

  .config-accordion-group .config-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .config-validation-summary {
    margin-top: 2px;
  }

  .config-row input,
  .config-row select,
  .config-panel textarea,
  .idea-panel #ideaTextarea,
  .analyze-count-select,
  .new-project-card input,
  .new-project-card select,
  .new-project-card textarea {
    scroll-margin-block: calc(16px + env(safe-area-inset-top)) calc(120px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
  }

  .sidebar-search-row {
    gap: 8px;
  }

  .search {
    min-height: 44px;
    padding: 10px 12px;
  }

  .search-clear,
  .search-reset-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    text-align: center;
    white-space: normal;
  }

  .search-clear {
    min-width: 44px;
    padding: 0 12px;
  }

  .search-reset-btn {
    padding: 10px 12px;
    width: 100%;
  }

  .project-status-filter {
    gap: 8px;
  }

  .project-status-filter-btn {
    line-height: 1.2;
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: 8px 12px;
    text-align: left;
    white-space: normal;
  }

  .log-header {
    align-items: center;
    background: var(--panel-bg);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 8px 0 6px;
    padding: 7px;
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 20;
  }

  body.light .log-header {
    background: var(--panel-bg);
  }

  #logDateSelect {
    flex: none;
    grid-column: 1 / 3;
    min-width: 0;
    width: 100%;
  }

  .log-progress {
    flex: none;
    gap: 6px;
    grid-column: 3 / -1;
    min-width: 0;
    order: 0;
  }

  .log-progress-text {
    font-size: 11px;
  }

  .progress-track {
    width: 48px;
  }

  .log-scroll-status {
    border-radius: 6px;
    font-size: 0;
    justify-content: center;
    min-height: 36px;
    padding: 0;
    width: 100%;
  }

  .log-scroll-status::before {
    margin-right: 0;
  }

  .log-header .btn-sm {
    flex: none;
    font-size: 12px;
    min-width: 0;
    padding: 7px 8px;
    width: 100%;
  }

  .log-raw-toggle {
    grid-column: span 2;
  }

  .log-search-controls {
    grid-column: 1 / -1;
    width: 100%;
  }

  .log-search-input {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .log-filter-group,
  .log-match-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  .log-filter-btn,
  .log-match-btn {
    min-height: 36px;
    padding: 6px 8px;
  }

  .log-match-count {
    min-width: 58px;
  }

  .log-box {
    font-size: 11px;
    height: clamp(50svh, calc(100svh - 230px), 68svh);
    line-height: 1.55;
    max-height: none;
    overflow-wrap: anywhere;
    padding: 12px 12px 58px;
    word-break: break-word;
  }

  .log-box.log-compact-mode {
    height: clamp(42svh, calc(100svh - 210px), 62svh);
    overscroll-behavior: contain;
    white-space: pre-wrap;
  }

  .log-box.log-compact-mode .log-ai-message {
    margin: 3px 0;
    padding: 5px 8px;
  }

  .log-compact-summary {
    gap: 7px;
    margin-bottom: 10px;
  }

  .log-compact-card {
    border-radius: 7px;
    padding: 8px 9px;
  }

  .log-compact-warnings {
    max-height: 118px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .log-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .log-box.log-nowrap {
    overflow-wrap: normal;
    word-break: normal;
  }

  .log-new-entries {
    align-self: stretch;
    bottom: auto;
    left: auto;
    max-width: none;
    min-height: 38px;
    padding: 8px 12px;
    position: static;
    transform: none;
    white-space: nowrap;
    width: 100%;
  }

  .log-new-entries:active {
    transform: translateY(1px);
  }

  #logDateSelect,
  .btn-sm,
  .log-new-entries,
  .btn-remove-time,
  .np-close-btn,
  .wizard-actions .btn {
    min-height: 44px;
  }

  .btn-sm,
  .log-new-entries,
  .btn-remove-time,
  .np-close-btn,
  .wizard-actions .btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
  }

  .btn-sm,
  .wizard-actions .btn {
    overflow-wrap: anywhere;
    padding: 10px 14px;
    white-space: normal;
  }

  .time-slot {
    min-height: 44px;
    padding: 2px 4px 2px 10px;
  }

  .btn-remove-time {
    border-radius: 6px;
    min-width: 44px;
    padding: 0;
  }

  .np-close-btn {
    height: 44px;
    width: 44px;
  }

  .flow-card-actions {
    gap: 10px;
  }

  .flow-card-action-group {
    gap: 8px;
  }

  .flow-card-action-group:not(.primary) {
    background: rgba(20, 29, 46, .36);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    flex-direction: column;
    padding: 6px;
  }

  .flow-card-primary-action,
  .flow-card-discard,
  .flow-card-link {
    align-items: center;
    display: inline-flex;
    flex: 1 1 auto;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .flow-card-confirm {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .flow-card-confirm span {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .flow-card-confirm button {
    min-height: 44px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    white-space: normal;
  }

  .wizard-actions {
    flex-wrap: wrap;
  }

  .wizard-actions .btn {
    flex: 1 1 140px;
  }

  .wizard-overlay {
    align-items: flex-start;
    height: 100vh;
    height: 100dvh;
    justify-content: center;
    overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
    -webkit-overflow-scrolling: touch;
  }

  .wizard-card {
    max-height: calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--dialog-keyboard-offset));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--dialog-keyboard-offset));
    overflow-y: auto;
    overflow-wrap: anywhere;
    scroll-padding-block: calc(16px + env(safe-area-inset-top)) calc(96px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
  }

  .new-project-card {
    min-width: 0;
  }

  #newProjectOverlay {
    align-items: flex-end;
    height: 100vh;
    height: 100dvh;
    justify-content: center;
    overflow: hidden;
    padding: calc(10px + env(safe-area-inset-top)) 0 0;
  }

  #newProjectOverlay .new-project-card {
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    max-height: calc(100vh - 10px - env(safe-area-inset-top) - var(--dialog-keyboard-offset));
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - var(--dialog-keyboard-offset));
    max-width: none;
    overflow: hidden;
    padding: 18px 16px 0;
    width: 100%;
  }

  .new-project-header,
  .new-project-progress,
  .new-project-card > .wizard-actions {
    flex: 0 0 auto;
  }

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

  .np-step-pill {
    padding: 7px 8px;
  }

  .new-project-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scroll-padding-block: 16px calc(128px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
    -webkit-overflow-scrolling: touch;
  }

  .new-project-card > .wizard-actions {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin: 4px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom) + var(--dialog-keyboard-offset));
  }

  .new-project-card .wizard-title,
  .new-project-card .wizard-sub,
  .new-project-card label,
  .new-project-card .label-hint,
  .new-project-card .field-error,
  .new-project-card .field-hint,
  .new-project-card .global-fallback-hint,
  .new-project-card .idea-error,
  .np-section-title,
  .np-namespace-status,
  .np-namespace-error,
  .np-create-status,
  .np-step-label,
  .np-step-detail,
  .np-step-links {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .np-namespace-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #npNamespaceStatusText {
    flex: 1 1 160px;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .project-header-actions .btn {
    flex: 1 1 100%;
  }

  .project-header-actions .admin-actions-menu {
    flex: 1 1 100%;
  }

  .project-link {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .flow-card-primary-action,
  .flow-card-discard {
    flex: 1 1 auto;
  }
}