/* ========= LIBRARY DETAIL PANEL ========= */

/* Right panel - detail */
.lib-detail-panel {
  flex: 1; overflow-y: auto; padding: 0 0 0 32px; min-width: 0;
}
.lib-detail-panel::-webkit-scrollbar { width: 4px; }
.lib-detail-panel::-webkit-scrollbar-track { background: transparent; }
.lib-detail-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 4px; }

/* Detail header */
.lib-detail-head { margin-bottom: 28px; }
.lib-detail-badges { display: flex; gap: 6px; margin-bottom: 10px; }
.lib-detail-badges .lib-badge { font-size: 10px; padding: 3px 10px; }
.lib-detail-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--night);
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.lib-detail-desc { font-size: 14px; color: var(--n500); line-height: 1.65; max-width: 600px; }
.lib-detail-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--n400); margin-top: 10px;
}

/* Detail sections */
.lib-detail-section { margin-bottom: 24px; }
.cap-section-label {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  color: var(--n400); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 10px;
}

/* Prompt */
.cap-prompt {
  padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(255,107,44,0.03);
  border: 1px solid rgba(255,107,44,0.06);
  font-family: var(--font-mono); font-size: 13px;
  line-height: 1.65; color: var(--n600);
  position: relative; max-width: 600px;
}
.cap-prompt-copy {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06); background: var(--pure);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--n400); cursor: pointer;
  transition: all 0.15s ease; opacity: 0;
}
.cap-prompt:hover .cap-prompt-copy { opacity: 1; }
.cap-prompt-copy:hover { background: var(--n50); color: var(--n600); }
.cap-prompt-copy.copied { color: #4CAF50; }

/* Steps + result */
.lib-detail-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 700px;
}
.cap-steps {
  list-style: none; counter-reset: steps;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 0;
}
.cap-steps li {
  counter-increment: steps;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--n500);
}
.cap-steps li::before {
  content: counter(steps);
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(255,107,44,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--sunrise);
  flex-shrink: 0; font-family: var(--font-display);
}
.lib-result-box {
  padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(76,175,80,0.03);
  border: 1px solid rgba(76,175,80,0.08);
  font-size: 13px; color: var(--n600); line-height: 1.55;
}
.lib-result-label {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  color: #4CAF50; text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 8px;
}

/* Actions */
.lib-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.cap-action-btn {
  padding: 10px 22px; border-radius: var(--radius-sm); border: none;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.01em;
}
.cap-action-btn.primary {
  background: var(--sunrise-gradient); color: #fff;
  box-shadow: 0 3px 14px rgba(255,107,44,0.25);
}
.cap-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,107,44,0.3);
}
.cap-action-btn.done {
  background: rgba(76,175,80,0.08); color: #4CAF50;
  cursor: default; border: 1px solid rgba(76,175,80,0.08);
}

/* Notes */
.cap-notes-wrap { margin-top: 16px; max-width: 600px; }
.cap-notes-toggle {
  font-size: 12px; color: var(--n400); cursor: pointer;
  font-weight: 500; display: flex; align-items: center; gap: 6px;
  transition: color 0.15s ease; border: none; background: none;
  font-family: var(--font); padding: 0;
}
.cap-notes-toggle:hover { color: var(--n600); }
.cap-notes-area {
  width: 100%; min-height: 70px; max-height: 140px;
  border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.06);
  padding: 12px 14px; font-family: var(--font); font-size: 13px;
  color: var(--n700); background: rgba(255,255,255,0.6);
  resize: vertical; outline: none; margin-top: 8px;
  transition: border-color 0.15s ease; line-height: 1.5;
}
.cap-notes-area:focus { border-color: rgba(255,107,44,0.2); }
.cap-notes-area::placeholder { color: var(--n300); }