.imago-account-banner {
  position: fixed;
  z-index: 10000;
  top: calc(8px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line, rgba(94, 182, 255, 0.24));
  border-radius: 8px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    color-mix(in srgb, var(--panel, var(--surface, #091522)) 94%, #050a12 6%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  color: var(--ink, var(--text, #eef8ff));
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

.imago-account-banner.is-hidden {
  display: none;
}

.imago-account-banner[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--warn, #f7b85f) 52%, transparent);
}

.imago-account-banner[data-tone="blocked"] {
  border-color: color-mix(in srgb, var(--danger, #ff637e) 60%, transparent);
}

.imago-account-banner-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.imago-account-banner-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.imago-account-banner-copy span,
.imago-account-banner-copy small {
  overflow-wrap: anywhere;
}

.imago-account-banner-copy span {
  color: var(--ink, var(--text, #eef8ff));
}

.imago-account-banner-copy small {
  color: var(--muted, #93a9bd);
}

.imago-account-banner button {
  flex: 0 0 auto;
  min-height: 34px;
  width: auto;
  border: 1px solid var(--line-strong, var(--line, rgba(94, 182, 255, 0.32)));
  border-radius: 8px;
  padding: 0 11px;
  background: var(--control-bg, var(--surface-2, rgba(9, 24, 40, 0.92)));
  color: var(--ink, var(--text, #eef8ff));
  cursor: pointer;
}

html.imago-account-banner-active body {
  padding-top: var(--imago-account-banner-offset, 76px);
}

html.imago-account-banner-active .login-view,
html.imago-account-banner-active .app {
  height: calc(var(--app-height, 100vh) - var(--imago-account-banner-offset, 76px));
}

html.imago-account-billing-blocked [data-imago-account-disabled="true"] {
  cursor: not-allowed !important;
}

@media (max-width: 680px) {
  .imago-account-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .imago-account-banner button {
    width: 100%;
  }
}