/* GlirOS remote access (0.0.76): the shell around the PC's interface. Calm, in the app's own colours (tokens.css): one card while connecting or
   after the session ended; the interface fills the page otherwise. Light and dark follow the device. */
:root { --bg: #eef3f0; --card: #ffffff; --text: #1c2a25; --dim: #56675f; --accent: #3f6f56; --on-accent: #ffffff; --line: rgba(40, 70, 58, 0.14); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #0d1614; --card: #15211d; --text: #e3ece7; --dim: #9db2a9; --accent: #8cc4a3; --on-accent: #0c1a14; --line: rgba(190, 225, 210, 0.12); } }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#pc { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.status { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 2; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(6px); }
.status[hidden] { display: none; }
.card { max-width: 26rem; padding: 28px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: center; box-shadow: 0 10px 40px rgb(0 0 0 / 0.08); }
.card p { margin: 12px 0 0; }
.logo { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); animation: breathe 2.4s ease-in-out infinite; }
.buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn { font: inherit; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.btn.secondary { background: transparent; color: var(--accent); }
.btn[hidden] { display: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes breathe { 50% { transform: scale(0.9); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } }