.connection-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; font-size:12px; color:#c4bfc9; }
.connection-bar [data-state="connected"] { color:#a0dfb1; }
.connection-bar [data-state="offline"], .connection-bar [data-state="failed"], .connection-bar [data-state="expired"] { color:#ffc59b; }
.connection-bar button, .ready-panel button, .app-update button { font:inherit; cursor:pointer; border:1px solid #66556c; border-radius:14px; padding:10px 16px; background:#312637; color:#fff; min-height:44px; }
.ready-panel { margin:12px 16px; border:1px solid #544258; border-radius:18px; padding:14px; background:linear-gradient(120deg,#2b202f,#1d1b24); color:#ede3ef; }
.ready-panel p { margin:0 0 10px; font-size:13px; line-height:1.6; }
.ready-panel div { display:flex; flex-wrap:wrap; gap:10px; }
.ready-panel [data-start-button] { background:#b57f87; color:#170e16; border-color:#d1a2a8; font-weight:700; }
.ready-panel button:disabled { opacity:.45; cursor:default; }
.ready-panel button[aria-pressed="true"] { border-color:#b9ddbf; color:#b9ddbf; }
.app-update { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(90vw,420px); padding:14px; border-radius:18px; background:#392c40; color:#fff; box-shadow:0 8px 40px #0009; z-index:10000; display:flex; align-items:center; justify-content:space-between; gap:12px; }
[hidden] { display:none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #e6c0ee; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }