.interactive-controls { border:0; padding:0; margin:0; min-width:0; }
.workspace-connection { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:1rem auto; padding:1rem 1.25rem; max-width:1270px; border:1px solid #cbd5e1; border-radius:.85rem; background:#f8fafc; color:#334155; font-size:.95rem; }
.loading-indicator { flex:0 0 1.1rem; width:1.1rem; height:1.1rem; border:2px solid #cbd5e1; border-top-color:#b91c1c; border-radius:50%; animation:connection-spin 1s linear infinite; }
.connection-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.6rem 1rem; border:1px solid #94a3b8; border-radius:.6rem; background:#fff; color:#1e293b; font:inherit; font-weight:650; cursor:pointer; text-decoration:none; }
.connection-button[hidden], [data-reload][hidden] { display:none; }
.connection-button:hover { border-color:#b91c1c; color:#991b1b; }
.connection-button:focus-visible { outline:3px solid #b91c1c; outline-offset:3px; }
.connection-button:disabled { opacity:.65; cursor:wait; }
#components-reconnect-modal { display:none; position:fixed; inset:auto 1rem 1rem auto; width:min(460px,calc(100vw - 2rem)); z-index:10000; }
#components-reconnect-modal[data-state]:not([data-state="connected"]) { display:block; }
.connection-card { padding:1.5rem; border:1px solid #cbd5e1; border-top:4px solid #b91c1c; border-radius:1rem; background:#fff; color:#1e293b; box-shadow:0 15px 60px #0f172a35; }
.connection-card h2 { display:flex; align-items:center; gap:.7rem; margin:0 0 .8rem; font-size:1.15rem; font-weight:750; }
.connection-card p { margin:0 0 .75rem; line-height:1.55; font-size:.95rem; }
.connection-card .connection-hint { color:#64748b; font-size:.85rem; }
.connection-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
body[data-connection-blocked="true"] #components-reconnect-modal[data-state]:not([data-state="connected"]) { display:flex; align-items:center; justify-content:center; inset:0; width:auto; padding:1rem; background:#0f172a60; }
body[data-connection-blocked="true"] .connection-card { width:min(100%,460px); }
#components-reconnect-modal[data-state="waiting"] .loading-indicator, #components-reconnect-modal[data-state="failed"] .loading-indicator, #components-reconnect-modal[data-state="rejected"] .loading-indicator, #components-reconnect-modal[data-state="offline"] .loading-indicator { animation:none; border-color:#b91c1c; }
.hero-location { color:#fff; font-size:1rem; letter-spacing:.02em; margin-bottom:1rem; }
@keyframes connection-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .loading-indicator { animation:none; } }