/* Layout */
.esng-wrap { max-width: 820px; margin: 24px auto; padding: 0 12px; font-family: Arial, Helvetica, sans-serif; color: #111; }
.esng-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.04); }
.esng-title { margin: 0 0 6px; font-size: 24px; }
.esng-subtle { color: #6b7280; }
.small { font-size: 12px; }

.esng-form label { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.esng-form input[type="text"] { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.esng-row { display: flex; gap: 10px; margin: 8px 0 12px; }

.esng-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.esng-btn:hover { background: #f3f4f6; }
.esng-primary { background: #111827; color: #fff; border-color: #111827; }
.esng-primary:hover { background: #000; }
.esng-ghost { background: transparent; }

.esng-tools { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.esng-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.esng-chip { display: inline-flex; align-items: center; gap: 6px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #111; }
.esng-chip .esng-text { display: inline-block; white-space: nowrap; }
.esng-chip .esng-remove { border: none; background: transparent; cursor: pointer; font-size: 16px; color: #555; line-height: 1; }
.esng-chip .esng-remove:hover { color: #b91c1c; }

.esng-details summary { cursor: pointer; margin-top: 12px; }

/* Toast */
.esng-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; background: #111827; color: #fff; padding: 8px 12px; border-radius: 8px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.esng-toast.show { opacity: 1; }