.dependency-field {
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.dependency-field legend {
  padding: 0 5px;
  color: #aaaeb8;
  font-size: 12px;
}

.dependency-field legend span {
  margin-left: 5px;
  color: #676b74;
  font-size: 10px;
}

#create-dependency-search,
#detail-dependency-search {
  width: 100%;
}

.dependency-selected {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}

.dependency-item,
.dependency-result {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #17191f;
}

.dependency-main {
  min-width: 0;
  flex: 1;
}

.dependency-code {
  color: #9198b5;
  font-size: 10px;
}

.dependency-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.dependency-release {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0 4px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.dependency-release select {
  width: 118px;
  padding: 4px 6px;
  font-size: 11px;
}

.dependency-state {
  font-size: 10px;
  color: #858891;
}

.dependency-state.satisfied { color: #66c58b; }
.dependency-state.blocked { color: var(--danger); }

.dependency-remove,
.dependency-add {
  padding: 3px 7px;
  background: transparent;
  color: #9da1aa;
}

.dependency-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
  max-height: 190px;
  overflow: auto;
}

.dependency-results:empty { display: none; }
.dependency-result { cursor: pointer; }
.dependency-result:hover { border-color: #555b70; }

.dependency-empty {
  padding: 8px;
  color: #6f727b;
  font-size: 11px;
  text-align: center;
}

.dependency-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  border: 1px solid #343744;
  border-radius: 10px;
  padding: 2px 6px;
  color: #9ba2ba;
  font-size: 9px;
}

.dependency-badge.waiting {
  color: #d2ad67;
  border-color: #5a4930;
}

.dependency-badge.satisfied {
  color: #66c58b;
  border-color: #30513e;
}

.section-summary {
  color: #777c88;
  font-weight: 400;
}

.dependent-cards {
  margin-top: 10px;
  color: #7d818b;
  font-size: 11px;
}

.dependent-cards:not(:empty) {
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
}

.card-progress {
  margin-top: 7px;
  overflow: hidden;
  color: #9ba7d7;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-progress::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #7185ff;
  box-shadow: 0 0 0 3px #7185ff20;
}

.live-progress {
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px solid #34406e;
  border-radius: 8px;
  background: #151925;
}

.decision-heading strong {
  color: #aeb8ff;
  font-size: 14px;
}

.decision-summary {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #1c2237;
}

.decision-summary b,
.decision-questions h4 {
  color: #8996d8;
  font-size: 10px;
}

.decision-summary span,
.decision-reason p {
  color: #d4d7df;
  font-size: 12px;
  line-height: 1.55;
}

.decision-reason summary {
  cursor: pointer;
  color: #858b9b;
  font-size: 10px;
}

.decision-reason p {
  margin: 7px 0 0;
  color: #9da2af;
}

.decision-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
}

.decision-questions h4 {
  margin: 3px 0 0;
  color: #d7c27b;
}

.decision-question {
  padding: 10px;
  border: 1px solid #3a3d49;
  border-radius: 7px;
  background: #17191f;
}

.decision-question-title {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 7px;
}

.decision-question-title > b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #343b66;
  color: #dfe3ff;
  font-size: 10px;
}

.decision-question-title strong {
  color: #e0e2e8;
  font-size: 12px;
  line-height: 1.45;
}

.decision-question > p {
  margin: 6px 0 0 27px;
  color: #9297a4;
  font-size: 10px;
  line-height: 1.5;
}

.decision-options {
  display: grid;
  gap: 5px;
  margin: 8px 0 0 27px;
}

.decision-option {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 7px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #30333c;
  border-radius: 6px;
  background: #14161b;
  text-align: left;
  cursor: pointer;
}

.decision-option.recommended {
  border-color: #4c5a99;
  background: #19203a;
}

.decision-option.selected {
  border-color: #8392f2;
  box-shadow: 0 0 0 1px #8392f266;
  background: #232b50;
}

.decision-option > span {
  color: #777d8d;
  font-size: 9px;
}

.decision-option.recommended > span {
  color: #91a2ff;
}

.decision-option div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.decision-option div strong {
  color: #cfd2da;
  font-size: 11px;
}

.decision-option div small,
.decision-freeform {
  color: #858a97;
  font-size: 10px;
  line-height: 1.4;
}

.decision-freeform {
  display: block;
  margin: 8px 0 0 27px;
}

.decision-answer-input {
  width: calc(100% - 27px);
  margin: 8px 0 0 27px;
}

.decision-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 7px;
}

.decision-actions textarea {
  min-height: 36px;
  resize: vertical;
}

#decision-apply {
  background: var(--accent);
  border-color: var(--accent);
}

.decision-resolved {
  padding: 8px;
  border: 1px solid #315641;
  border-radius: 6px;
  color: #72c995;
  background: #17251e;
  font-size: 11px;
}

.live-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.live-progress h3 { display: flex; align-items: center; gap: 5px; margin-top: 0 !important; }
.live-progress strong { font-size: 12px; font-weight: 550; }
.live-progress .planning-live-spinner { width: 12px; height: 12px; }
.card-live-events { margin-top: 10px; padding: 9px; border: 1px solid #292f45; border-radius: 6px; background: #11141d; }
.live-progress .planning-live-tool { margin: 0; }
.live-raw-log { border-top: 1px solid #292f45; padding-top: 8px; }

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: #7185ff;
  animation: live-pulse 1.4s infinite;
}

@keyframes live-pulse {
  50% { opacity: .35; transform: scale(.75); }
}

.live-progress-elapsed,
.live-progress-meta {
  color: #7f879f;
  font-size: 10px;
}

.live-progress-meta { margin-top: 6px; }
.live-progress details { margin-top: 10px; }

.detail-dialog {
  max-height: 92vh;
  overflow: hidden;
}

.detail-dialog .detail {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns .18s ease;
}

.detail-content,
.details-preview {
  min-width: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.detail-content {
  padding-right: 4px;
}

.details-preview {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101116;
}

.details-preview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  background: #15171c;
}

.details-preview-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.details-preview-head span {
  color: var(--muted);
  font-size: 10px;
}

.details-preview-head strong {
  font-size: 12px;
  font-weight: 600;
}

.details-preview-head button {
  margin-left: auto;
  padding: 5px 8px;
  color: #b9bdc8;
  background: #1b1d24;
  font-size: 11px;
}

.detail-dialog.preview-collapsed .detail-layout {
  grid-template-columns: minmax(0, 1fr) 154px;
}

.detail-dialog.preview-collapsed .details-preview {
  align-self: start;
}

.detail-dialog.preview-collapsed .markdown-viewer {
  display: none;
}

.markdown-viewer {
  padding: 16px 18px 28px;
  color: #cdd0d8;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.markdown-viewer > :first-child { margin-top: 0; }
.markdown-viewer > :last-child { margin-bottom: 0; }
.markdown-viewer h1,
.markdown-viewer h2,
.markdown-viewer h3,
.markdown-viewer h4,
.markdown-viewer h5,
.markdown-viewer h6 {
  margin: 1.5em 0 .55em;
  color: #f0f1f4;
  line-height: 1.3;
}
.markdown-viewer h1 { padding-bottom: .35em; border-bottom: 1px solid var(--line); font-size: 1.65em; }
.markdown-viewer h2 { padding-bottom: .3em; border-bottom: 1px solid #23252c; font-size: 1.4em; }
.markdown-viewer h3 { font-size: 1.2em; }
.markdown-viewer h4,
.markdown-viewer h5,
.markdown-viewer h6 { font-size: 1em; }
.markdown-viewer p { margin: .7em 0; }
.markdown-viewer ul,
.markdown-viewer ol { margin: .65em 0; padding-left: 1.8em; }
.markdown-viewer li { margin: .2em 0; }
.markdown-viewer blockquote {
  margin: .8em 0;
  padding: 6px 12px;
  border-left: 3px solid #606ea9;
  color: #aeb4c5;
  background: #151821;
}
.markdown-viewer pre {
  padding: 11px 12px;
  overflow: auto;
  border: 1px solid #292c35;
  border-radius: 6px;
  background: #0b0c10;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.markdown-viewer code {
  padding: 1px 4px;
  border-radius: 4px;
  color: #d8b8ff;
  background: #24202b;
  font: .92em ui-monospace, SFMono-Regular, Consolas, monospace;
}
.markdown-viewer pre code { padding: 0; color: #cfd3dc; background: transparent; }
.markdown-viewer a { color: #8fa2ff; text-decoration: none; }
.markdown-viewer a:hover { text-decoration: underline; }
.markdown-viewer hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--line); }
.markdown-empty { color: #686c76; }

@media (max-width: 900px) {
  .detail-dialog { width: 96vw; }
  .detail-layout,
  .detail-dialog.preview-collapsed .detail-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .detail-content { overflow: visible; }
  .details-preview { min-height: 320px; overflow: visible; }
  .detail-dialog.preview-collapsed .details-preview { min-height: 0; }
}
.live-progress summary { cursor: pointer; color: #9da8d2; font-size: 11px; }

.live-progress pre {
  max-height: 260px;
  margin: 8px 0 0;
  overflow: auto;
  border: 1px solid #2b3148;
  border-radius: 6px;
  padding: 10px;
  background: #0e1119;
  color: #aeb5c8;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
