/* SQPR Gamer Social Work — telas sociais (seguem o tema do menu: body.menu-on) */
.soc-list{list-style:none;margin:0;padding:.25rem 0;display:grid}
.soc-list.panel{padding:.35rem .9rem}
.soc-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;flex-wrap:wrap}
.soc-row+.soc-row{border-top:1px solid var(--line)}
.soc-who{display:flex;align-items:center;gap:.7rem;flex:1;min-width:12rem;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.soc-who:hover b{text-decoration:underline}
.soc-who:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.soc-av{width:2.6rem;height:2.6rem;flex:none;border-radius:4px;display:grid;place-items:center;font-weight:900;font-size:1.1rem;color:var(--accent);background:var(--surface-2);border:1px solid var(--line)}
.soc-names{display:grid;min-width:0}
.soc-names b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-stretch:80%;letter-spacing:.02em}
.soc-names small{color:var(--ink-2);font-size:.8125rem}
.soc-acts{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.soc-acts .btn,.soc-acts .btn-ghost{min-height:2.5rem}
.soc-tag{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.3rem .55rem;border-radius:3px;border:1px solid var(--line);color:var(--ink-2)}
.soc-tag.ok{border-color:rgba(123,227,162,.45);color:var(--ok)}
.soc-tag.warn{border-color:rgba(255,142,152,.45);color:#FF8E98}
.soc-form{display:grid;gap:.75rem}
.soc-inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.soc-inline .f-in{flex:1 1 12rem;width:auto}
.soc-at{font-weight:900;color:var(--ink-2);font-size:1.1rem}
.soc-warn{border-color:rgba(255,191,95,.45) !important;display:grid;gap:.4rem;margin:0 0 1.5rem}
.soc-checks{display:grid;gap:.4rem;margin-top:.4rem}
.soc-check{display:flex;gap:.55rem;align-items:center;cursor:pointer}
.soc-check input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.soc-check small{color:var(--ink-2)}
.soc-skel{display:grid;gap:.5rem;margin:.6rem 0}
.soc-skel i{display:block;height:2.6rem;border-radius:4px;background:linear-gradient(90deg,var(--surface-2),rgba(255,255,255,.06),var(--surface-2));background-size:200% 100%;animation:soc-pulse 1.2s ease-in-out infinite}
@keyframes soc-pulse{0%{background-position:100% 0}100%{background-position:-100% 0}}
.panel input[type=search]{margin-bottom:.4rem}
dialog.soc-dlg{width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;background:var(--surface,#15111F);color:var(--ink,#F6F2FB);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:6px;padding:1.25rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);display:grid;gap:.85rem}
dialog.soc-dlg:not([open]){display:none}
dialog.soc-dlg::backdrop{background:rgba(8,6,14,.72)}
.soc-dlg-h{display:flex;gap:.8rem;align-items:center}
.soc-dlg-h>div:not(.soc-av){flex:1;min-width:0}
.soc-dlg-h .soc-av{width:3.5rem;height:3.5rem;font-size:1.5rem}
.soc-dlg .pname{font-stretch:62%;text-transform:uppercase;font-size:1.75rem;line-height:1;margin:0}
.soc-dlg .pnick{margin:.15rem 0 0;color:#FF8EC2;font-weight:700}
.soc-dlg .hub-t{font-stretch:62%;text-transform:uppercase;margin:0}
@media (prefers-reduced-motion:reduce){.soc-skel i{animation:none}}
@media (max-width:720px){.soc-row{align-items:flex-start}.soc-acts{width:100%}}

/* ---------- CONEXÕES ---------- */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.cx-card{position:relative;display:flex;flex-direction:column;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.15rem 1rem;overflow:hidden;box-shadow:var(--shadow)}
.cx-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--cx),var(--cx2))}
.cx-card.on{border-color:color-mix(in oklab,var(--cx2) 45%,var(--line))}
.cx-head{display:flex;align-items:center;gap:.6rem .8rem;flex-wrap:wrap}
.cx-logo{width:2.9rem;height:2.9rem;flex:none;display:grid;place-items:center;border-radius:6px;background:linear-gradient(135deg,var(--cx),color-mix(in oklab,var(--cx) 60%,#000));color:#fff;font-weight:900;font-size:1.35rem;font-stretch:80%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cx-title{flex:1 1 7rem;min-width:0;display:grid}
.cx-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:1.25rem;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.cx-title small{color:var(--ink-2);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-pill{flex:none;margin-left:auto;font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .55rem;border-radius:3px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.cx-pill.ok{color:#0B0812;background:var(--ok);border-color:var(--ok)}
.cx-pill.ready{color:#F6F2FB;border-color:rgba(246,242,251,.45)}
.cx-pill.muted{opacity:.85}
.cx-faz{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.9375rem}
.cx-faz li{position:relative;padding-left:1rem}
.cx-faz li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;border-radius:1px;background:var(--cx2)}
.cx-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto}
.cx-acts .btn,.cx-acts .btn-ghost{min-height:2.6rem}
.cx-acts .btn[disabled]{opacity:.45;cursor:not-allowed}
.cx-manual{display:flex;gap:.5rem;flex-wrap:wrap;width:100%}
.cx-manual .f-in{flex:1 1 11rem;width:auto}
.cx-note{margin:0;font-size:.8125rem;color:var(--ink-2);width:100%}
.cx-obs{margin:0;font-size:.8125rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:.65rem}
.cx-skel{min-height:15rem}
.cx-skel i{display:block;height:1.2rem;border-radius:3px;background:var(--surface-2)}
.cx-skel i:first-child{height:2.9rem;width:60%}
@media (max-width:720px){.cx-grid{grid-template-columns:minmax(0,1fr)}}