/* style.css — estilos simples */
body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:#f6f8fa; color:#111; margin:0; padding:20px; }
.container { max-width:1000px; margin:0 auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.08);} 
h1 { margin-top:0; }
.row { margin-bottom:16px; }
label { display:block; margin-bottom:6px; font-weight:600; }
select, input[type="text"] { width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; }
.editor { height:360px; border:1px solid #e5e7eb; border-radius:6px; }
.actions { text-align:right; }
button { background:#2563eb; color:#fff; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:600; }
button:disabled { opacity:0.6; cursor:not-allowed; }
pre { background:#0b1220; color:#d1f7ff; padding:12px; border-radius:6px; overflow:auto; max-height:420px; }

/* Modal styles (moved from inline in index.html). */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal { background: #fff; border-radius: 8px; padding: 18px; max-width: 560px; width: 92%; box-shadow: 0 8px 24px rgba(0,0,0,0.18); border-left: 6px solid transparent; }
.modal__title { margin: 0 0 8px 0; font-size: 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal__message { margin: 0 0 12px 0; color: #0b1220; }
.close-btn { background: #2563eb; color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight:600; }
.close-btn:hover { opacity: 0.92; }

/* Variant styles */
.modal--success { border-left-color: #16a34a; }
.modal--success .modal__title { color: #065f46; }
.modal--success .close-btn { background: #16a34a; }

.modal--error { border-left-color: #dc2626; }
.modal--error .modal__title { color: #991b1b; }
.modal--error .close-btn { background: #dc2626; }

/* Accessible focus */
.close-btn:focus { outline: 3px solid rgba(37,99,235,0.18); outline-offset: 2px; }

/* Small responsive tweak */
@media (max-width:420px) {
	.modal { padding: 14px; }
	.close-btn { padding: 8px 10px; }
}

/* Suggestion block inside modal */
.modal__suggestion {
	margin-top: 10px;
	padding: 10px 12px;
	background: #f8fafc; /* very light */
	border-radius: 6px;
	color: #0b1220;
	font-size: 13px;
	line-height: 1.4;
	border-left: 4px solid rgba(0,0,0,0.06);
}
.modal--success .modal__suggestion { background: #ecfdf5; border-left-color: #bbf7d0; }
.modal--error .modal__suggestion { background: #fff1f2; border-left-color: #fecaca; }

.modal__suggestion strong { display:block; margin-bottom:6px; }