/* Mia API Client pages (product, licence, lost key). Uses the --mb-* brand colours from /css/mia.css. */

.ac-price:not(:empty)::before { content: " — "; }

.ac-key-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 26px 0 22px;
  max-width: 760px;
}

.ac-key-meta { color: var(--mb-muted); font-size: 14px; }
.ac-key-meta b { color: var(--mb-ink); }

.ac-key {
  display: block;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-all;
  background: var(--mb-page);
  border: 1px solid var(--mb-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  color: var(--mb-ink);
  user-select: all;
}

.ac-help { color: var(--mb-muted); font-size: 14px; margin-top: 16px; max-width: 70ch; }
.ac-help a, .hero-trust a { color: var(--mb-link); }

.ac-note { border-radius: 8px; padding: 10px 14px; font-size: 14px; max-width: 760px; }
.ac-note-warn { background: rgba(245, 187, 59, .18); border: 1px solid var(--mb-amber); }

.ac-form { margin: 28px 0 8px; max-width: 620px; }
.ac-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.ac-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-form input {
  flex: 1 1 280px;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--mb-line-strong);
  border-radius: 10px;
  background: var(--mb-surface);
  color: var(--mb-ink);
}
.ac-form input:focus { outline: 2px solid var(--mb-primary-bright); outline-offset: 1px; }
.ac-form button[disabled] { opacity: .6; cursor: progress; }

.ac-status { margin: 14px 0 0; font-size: 15px; }
.ac-status.ok { color: #15803d; }
.ac-status.error { color: #b91c1c; }

.is-disabled { opacity: .55; pointer-events: none; }

/* <button>s don't inherit the page font by default. */
button.btn-cta, button.btn-ghost { font-family: inherit; }

/* App icon above the product page heading (shared by every desktop app page). */
.app-hero-icon { width: 72px; height: 72px; display: block; margin-bottom: 14px; }