/* Compact cosmic ribbon in document flow; never covers the page or asks for permission. */
.app-banner[hidden] { display: none !important; }
.app-banner { background: #191432; color: #f4f0ff; border-bottom: 1px solid #51456b; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
.app-banner-inner { box-sizing: border-box; display: flex; align-items: center; gap: 10px; max-width: 1184px; margin: 0 auto; padding: 12px 16px 12px 8px; }
.app-banner .app-banner-close { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #c4badb; font: 28px/1 sans-serif; cursor: pointer; }
.app-banner .app-banner-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; }
.app-banner .app-banner-copy { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.app-banner-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; }
.app-banner-copy span { display: block; margin-top: 3px; font-size: 11px; color: #c4badb; }
.app-banner .app-banner-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 106px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: #b8a0ff; color: #100d25; text-decoration: none; text-align: center; font-size: 13px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.app-banner .app-banner-link:hover { background: #f4f0ff; }
.app-banner .app-banner-close:hover { background: #30235a; color: #f4f0ff; }
.app-banner :focus-visible { outline: 3px solid #ffd57b; outline-offset: 2px; }
@media (max-width: 359px) {
  .app-banner-inner { gap: 7px; padding-right: 10px; padding-left: 4px; }
  .app-banner .app-banner-close { flex-basis: 32px; width: 32px; }
  .app-banner .app-banner-link { max-width: 94px; padding: 8px 10px; }
}