/* Cards de conexao compactos; os estados continuam vindo do provedor. */
.main-area .page .connection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;align-items:start}
.main-area .page .connection-grid .connection-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center;align-content:start;gap:14px 12px;min-height:0;padding:18px!important;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 3px 14px #03121e08;transform:none;transition:border-color .18s,box-shadow .18s}
.main-area .page .connection-grid .connection-card:hover{transform:none;border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:0 5px 20px #03121e0d}
.main-area .page .connection-card>.connection-icon{grid-column:1;grid-row:1;align-self:center;width:44px!important;height:44px!important;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));background:color-mix(in srgb,var(--brand) 8%,var(--panel));box-shadow:none;color:var(--brand)}
.main-area .page .connection-card>.connection-icon svg{width:22px;height:22px}
.main-area .page .connection-card>div:nth-child(2){grid-column:2;grid-row:1;min-width:0;gap:4px}
.main-area .page .connection-card h3{margin:0!important;font-size:15px!important;line-height:1.4;overflow-wrap:anywhere;color:var(--text);font-weight:650}
.main-area .page .connection-card>div:nth-child(2) p{margin:0;color:var(--muted);font-size:11px;font-weight:450;line-height:1.5;letter-spacing:0;overflow-wrap:anywhere}
.main-area .page .connection-card>.badge{grid-column:3;grid-row:1;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:5px 8px;margin:0;border-radius:7px;border:1px solid var(--line);box-shadow:none;font-size:10px;font-weight:650;line-height:1.4;white-space:nowrap}
.main-area .page .connection-card>.badge::before{content:'';position:static;display:block;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;box-shadow:none;animation:none}
.main-area .page .connection-card>.badge.connected{color:#117735;background:#eaf9ee;border-color:#bce8c8}
.dark .main-area .page .connection-card>.badge.connected{color:#70e897;background:#153125;border-color:#27563c}
.main-area .page .connection-card>.badge:is(.connecting,.waiting_qr,.waiting_code){color:#896000;background:#fff8e8;border-color:#eddaa9}
.dark .main-area .page .connection-card>.badge:is(.connecting,.waiting_qr,.waiting_code){color:#f3cd72;background:#302a1c;border-color:#55462b}
.main-area .page .connection-card>.badge:is(.disconnected,.failed,.error){color:#a13647;background:#fff0f2;border-color:#f2c9cf}
.dark .main-area .page .connection-card>.badge:is(.disconnected,.failed,.error){color:#f5a4b1;background:#342128;border-color:#62343d}
.main-area .page .connection-card .card-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.main-area .page .connection-card .card-actions .btn{flex:0 1 auto;min-height:35px;padding:7px 10px;font-size:11px;border-radius:8px}
.main-area .page .connection-card .card-actions .btn.danger{color:#ae3549;border:1px solid #e9c9cf;background:transparent;box-shadow:none}
.dark .main-area .page .connection-card .card-actions .btn.danger{color:#f1a3b0;border-color:#653541;background:#ef526208}
.main-area .page .connection-card .card-actions .icon-btn[title="Atualizar"]{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;width:auto;min-height:35px;height:auto;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:11px}
.main-area .page .connection-card .card-actions .icon-btn[title="Atualizar"]::after{content:'Atualizar'}
.main-area .page .connection-card .card-actions .icon-btn svg{width:15px;height:15px}
@media(max-width:480px){.main-area .page .connection-grid .connection-card{grid-template-columns:40px minmax(0,1fr)!important;padding:16px!important;gap:10px 12px}.main-area .page .connection-card>.connection-icon{width:40px!important;height:40px!important}.main-area .page .connection-card>.badge{grid-column:2;grid-row:2;justify-self:start}.main-area .page .connection-card .card-actions{justify-content:flex-start;padding-top:12px}}
@media(prefers-reduced-motion:reduce){.main-area .page .connection-grid .connection-card{transition:none}}