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

.asg-form label { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.asg-form input[type="text"], .asg-form input[type="number"], .asg-form select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; width: 100%; }
.asg-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.asg-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: 16px; }
.asg-fieldset { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.asg-fieldset legend { padding: 0 6px; color: #374151; font-weight: 600; }

.asg-actions { display:flex; gap: 10px; margin-top: 12px; }
.asg-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.asg-btn:hover { background: #f3f4f6; }
.asg-primary { background: #111827; color: #fff; border-color: #111827; }
.asg-primary:hover { background: #000; }
.asg-ghost { background: transparent; }

.asg-tools { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.asg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.asg-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; }
.asg-chip .asg-text { display: inline-block; white-space: nowrap; }
.asg-chip .asg-remove { border: none; background: transparent; cursor: pointer; font-size: 16px; color: #555; line-height: 1; }
.asg-chip .asg-remove:hover { color: #b91c1c; }

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

/* Toast */
.asg-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; }
.asg-toast.show { opacity: 1; }