.auto-design-open {
  border-color: rgba(102,230,179,.55);
  background: linear-gradient(135deg,rgba(102,230,179,.18),rgba(78,188,243,.15));
  color: #c8ffe9;
}
.auto-design-open:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg,rgba(102,230,179,.28),rgba(78,188,243,.23));
}
.auto-design-hint-box {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 13px;
  border: 1px solid rgba(78,188,243,.28);
  border-radius: 13px;
  background: #0e1620;
}
.auto-design-hint-box label { display: grid; gap: 6px; }
.auto-design-hint-box textarea { min-height: 70px; resize: vertical; }
.hint-design-open {
  min-height: 46px;
  border-color: rgba(78,188,243,.5);
  background: rgba(78,188,243,.12);
  color: #d5efff;
}
.hint-design-open:hover { border-color: #75d5ff; background: rgba(78,188,243,.2); }
.hint-design-open.is-loading .auto-design-icon { animation: auto-design-spin 1.1s linear infinite; }
.auto-design-icon {
  display: inline-grid;
  place-items: center;
  margin-right: 5px;
  color: var(--accent);
  font-size: 16px;
}
.auto-design-open.is-loading .auto-design-icon { animation: auto-design-spin 1.1s linear infinite; }
.auto-design-status {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #111822;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.auto-design-status.loading { border-color: rgba(78,188,243,.35); color: #b8def4; }
.auto-design-status.success { border-color: rgba(102,230,179,.4); background: #10231d; color: #bff9df; }
.auto-design-status.error { border-color: rgba(255,107,126,.45); background: #2b171d; color: #ffc2cb; }
@keyframes auto-design-spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
  .auto-design-hint-box { grid-template-columns: 1fr; }
  .hint-design-open { width: 100%; }
}