/* BodyMake basic styles */
#bodymake-app { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; max-width: 860px; margin: 0 auto; padding: 12px; }
.bm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bm-title { font-size: 20px; font-weight: 700; margin: 4px 0 12px; }
.bm-desc  { color: #6b7280; margin-bottom: 14px; }

.bm-progress-wrap { width: 100%; height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin: 12px 0 20px; }
.bm-progress { height: 100%; width: 12%; background: #10b981; transition: width .25s ease; }

.bm-step { display: none; }
.bm-fieldset { margin-bottom: 12px; }
.bm-legend { font-weight: 600; margin-bottom: 8px; }
.bm-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; }
.bm-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; background: #fff; }
.bm-opt input { margin: 0; }

.bm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.bm-btn { appearance: none; border: 1px solid #10b981; background: #10b981; color: #fff; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.bm-btn--ghost { background: #fff; color: #111827; border-color: #d1d5db; }
.bm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

#bm-error { color: #dc2626; margin-top: 6px; }
#bm-result { white-space: pre-wrap; line-height: 1.6; padding: 14px; border: 1px dashed #e5e7eb; border-radius: 10px; margin-top: 14px; background: #fafafa; }

/* Loading */
.bm-loading { position: relative; }
.bm-loading::after {
  content: ' ';
  position: absolute; inset: 0; background: rgba(255,255,255,.5);
  pointer-events: none;
}
.bm-result-md { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans JP', monospace; }

/* Inline status + spinner */
.bm-inline-status { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#f9fafb; font-weight:600; }
.bm-spinner { width:24px; height:24px; border:3px solid #e5e7eb; border-top-color:#10b981; border-radius:50%; animation: bmspin 1s linear infinite; }
@keyframes bmspin { to { transform: rotate(360deg); } }

/* Inline debug log */
.bm-log { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background:#fff; border:1px dashed #e5e7eb; border-radius:10px; padding:10px; max-height: 220px; overflow:auto; color:#111827; }
.bm-log .bm-log-line { margin: 0; }

/* Rendered Markdown to HTML styles */
#bm-result { white-space: normal; }
.bm-result-md h1,.bm-result-md h2,.bm-result-md h3{ margin: .6em 0 .3em; }
.bm-result-md p{ margin: .5em 0; }
.bm-result-md ul,.bm-result-md ol{ padding-left: 1.2em; margin:.4em 0; }
.bm-result-md pre{ background:#0b1424; color:#eaeef9; padding:10px; border-radius:8px; overflow:auto; }
.bm-result-md code{ background:#f3f4f6; padding:.1em .3em; border-radius:4px; }
.bm-result-md table{ border-collapse: collapse; margin:.6em 0; width:100%; }
.bm-result-md th,.bm-result-md td{ border:1px solid #e5e7eb; padding:.4em .6em; }