@import "../../styles/global.css";

.nano-input {
  background: var(--sc-bg-primary);
  border: 1px solid var(--sc-border-primary);
  color: var(--sc-text-primary);
  padding: var(--sc-spacing-sm);
  font-size: 12px;
  width: 100%;
  margin-bottom: var(--sc-spacing-sm);
  border-radius: var(--sc-radius-sm);
}

.nano-input:focus {
  outline: none;
  border-color: var(--sc-border-accent);
}

.nano-label {
  display: block;
  color: var(--sc-text-muted);
  font-size: 11px;
  margin-bottom: var(--sc-spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.greeting-output {
  background: var(--sc-bg-primary);
  border: 1px solid var(--sc-border-success);
  padding: var(--sc-spacing-sm);
  margin-top: var(--sc-spacing-sm);
  color: var(--sc-border-success);
  font-size: 11px;
  border-radius: var(--sc-radius-sm);
}

.greeting-error {
  color: var(--sc-border-warning);
  font-size: 11px;
  margin-top: var(--sc-spacing-sm);
}