/* Basic styles */
.hr-app{ max-width: 980px; margin: 0 auto; }
.hr-form{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px 18px; }
.hr-title{ margin:0 0 6px; font-size:22px; }
.hr-desc{ margin:0 0 12px; color:#6b7280; }
.hr-step{ margin:14px 0; padding:8px 0; }
.hr-field{ margin:10px 0; }
.hr-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hr-grid{ display:grid; gap:10px; }
.hr-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.hr-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.hr-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:12px; }
.hr-btn{ padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; cursor:pointer; }
.hr-btn-primary{ background:#fff; }
.hr-btn-secondary{ background:#fff; }
.hr-btn-accent{ background:#10b981; color:#fff; border-color:#10b981; }
.hr-error{ display:none; color:#b91c1c; margin:8px 0; font-weight:600; }
.hr-help{ color:#6b7280; font-size:12px; }

/* Chips */
.hr-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:8px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.hr-chip-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.hr-chip{ background:#eef2ff; color:#1e3a8a; border:1px solid #dbeafe; border-radius:999px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.hr-chip .x{ cursor:pointer; font-weight:bold; }
.hr-chips input{ flex:1; min-width:180px; border:none; outline:none; font-size:14px; }

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

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

/* debug log */
.hr-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; }
.hr-log .line{ margin:0; }