/* Place before Routes: the strip occupies space instead of covering forms,
   remains visible while scrolling, and leaves bottom navigation/install prompts clear. */
.studio-connection-status { position: sticky; top: 0; z-index: 100; padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px; background: #f5e8dc; color: #6f472e; border-bottom: 1px solid #e3cdbb; font: 13px/1.45 var(--sans, Arial, sans-serif); }
.studio-connection-status[hidden] { display: none !important; }
.studio-connection-inner { max-width: 1000px; margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.studio-connection-inner > svg { width: 24px; height: 24px; flex: 0 0 24px; }
.studio-connection-inner > div { flex: 1; min-width: 0; }
.studio-connection-inner strong { display: block; font-size: 13px; font-weight: 650; }
.studio-connection-inner span { display: block; margin-top: 1px; }
.studio-connection-inner button { flex: 0 0 auto; min-height: 44px; padding: 8px 13px; border: 1px solid currentColor; border-radius: 10px; color: inherit; background: transparent; font: 600 12px/1.4 var(--sans, Arial, sans-serif); cursor: pointer; }
.studio-connection-inner button[hidden] { display: none !important; }
.studio-connection-inner button:focus-visible { outline: 3px solid #905b36; outline-offset: 3px; }
.studio-connection-status[data-state="restored"] { background: #e9eee2; color: #405334; border-color: #d6dfcc; }
body:has(#components-reconnect-modal[open]) .studio-connection-status { display: none; }
@media (max-width: 420px) { .studio-connection-status { padding-inline: 16px; font-size: 12px; } .studio-connection-inner { gap: 10px; } }