/* NUVIO-SYNC: no forzar body styles que rompan app.css */
body.magis-page {
  background: #080a0d !important;
  color: #f5f7f8 !important;
  font-family: "Nuvio", Inter, system-ui, sans-serif !important;
}
:root{
  --bg:#0b0b0f; --card:#16161d; --line:rgba(255,255,255,.12);
  --text:#f4f4fb; --muted:#a7a7bd; --accent:#e50914;
}
*{box-sizing:border-box}
body.magis-page{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,sans-serif;min-height:100vh}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,11,15,.92);backdrop-filter:blur(10px);z-index:50}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer;text-decoration:none;color:inherit}
.topbar .brand .logo{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;place-items:center;font-size:12px}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a,.topbar nav button{
  background:transparent;border:0;color:var(--muted);padding:8px 10px;border-radius:8px;
  font:inherit;cursor:pointer;text-decoration:none
}
.topbar nav a:hover,.topbar nav button:hover,.topbar nav a.active{color:#fff;background:rgba(255,255,255,.06)}
.join-modal-bg{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:16px}
.join-modal-bg.on{display:flex}
.join-modal{width:min(400px,100%);background:#16161d;border:1px solid var(--line);border-radius:16px;padding:20px}
.join-modal h3{margin:0 0 6px}
.join-modal p{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.join-modal input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#0b0b10;color:#fff;font-size:1.15rem;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:700;margin-bottom:12px}
.join-modal .jm-actions{display:flex;gap:8px}
.join-modal .jm-actions button{flex:1;padding:12px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.jm-go{background:var(--accent);color:#fff}
.jm-cancel{background:rgba(255,255,255,.08);color:#fff}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:10px 16px;border-radius:999px;z-index:300;opacity:0;transition:.2s;pointer-events:none;max-width:90%;text-align:center}
.toast.on{opacity:1}
.salas-wrap{max-width:960px;margin:0 auto;padding:20px 16px 48px}
.salas-wrap h1{font-size:1.4rem;margin:0 0 8px}
.salas-wrap .lead{color:var(--muted);margin-bottom:16px}
.salas-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.salas-row input{flex:1;min-width:140px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit}
.salas-row button{padding:11px 16px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.salas-row button.ghost{background:var(--card);border:1px solid var(--line);color:var(--text)}
.salas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sala-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer}
.sala-card .ph{aspect-ratio:2/3;background:#111 center/cover}
.sala-card .body{padding:10px}
.sala-card .t{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sala-card .m{color:var(--muted);font-size:.75rem;margin-top:4px}