/* overrides finos — o grosso do tema vem do <style> inline (igual Spy Cockpit) */
select.inp { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .5rem center; padding-right: 1.6rem; }
input[type="number"].inp { -moz-appearance: textfield; }
.card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 12px; }
.muted { color: hsl(var(--muted-foreground)); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.25rem;
  padding:0 1rem; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)/.7); }
.btn-accent { background: hsl(var(--accent)); color: #fff; box-shadow: 0 6px 18px -6px hsl(var(--accent)/.65); }
.btn:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.chip { cursor: pointer; }
.chip-on { background: hsl(var(--accent)); color: #fff; border-color: hsl(var(--accent)); }

/* ===== Conexão v2 — redesign dark premium ESCOPADO em .cx2 (nada vaza p/ outras telas) ===== */
.cx2 { --cx-primary: #6d5dfc; --cx-soft: #6d5dfc26; }
.cx2 .cx-wrap { max-width: 56rem; margin-inline: auto; }
.cx2 .cx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.cx2 .cx-h1 { font-size:18px; font-weight:700; }
.cx2 .cx-sub { font-size:12px; color:hsl(var(--muted-foreground)); margin-top:.2rem; }
.cx2 .cx-list { display:flex; flex-direction:column; gap:.7rem; }
.cx2 .cx-dot { width:8px; height:8px; border-radius:9999px; background:hsl(var(--muted-foreground)/.6); display:inline-block; }
.cx2 .cx-dot.on { background:hsl(var(--success)); box-shadow:0 0 0 3px hsl(var(--success)/.18); }
.cx2 .cx-warn-chip { font-size:10px; font-weight:600; color:hsl(var(--warning)); border:1px solid hsl(var(--warning)/.4);
  background:hsl(var(--warning)/.12); padding:.1rem .45rem; border-radius:9999px; }

/* card de perfil (lista) */
.cx2 .pcard { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1px solid hsl(var(--border));
  border-radius:14px; background:hsl(var(--card)); cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; }
.cx2 .pcard:hover { border-color:var(--cx-primary); transform:translateY(-1px); box-shadow:0 12px 32px -20px var(--cx-primary); }
.cx2 .pcard-av, .cx2 .hero-av { display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--cx-primary), hsl(var(--accent))); border-radius:12px; flex-shrink:0; }
.cx2 .pcard-av { width:42px; height:42px; font-size:17px; }
.cx2 .pcard-main { flex:1; min-width:0; }
.cx2 .pcard-top { display:flex; align-items:center; gap:.5rem; }
.cx2 .pcard-nome { font-size:14px; font-weight:600; }
.cx2 .pcard-status { font-size:11px; color:hsl(var(--muted-foreground)); }
.cx2 .pcard-stats { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.35rem; font-size:11.5px; color:hsl(var(--muted-foreground)); }
.cx2 .cx-stat b { color:hsl(var(--foreground)); font-weight:600; }
.cx2 .pcard-chev { color:hsl(var(--muted-foreground)); font-size:22px; line-height:1; }

/* breadcrumb + hero (detalhe) */
.cx2 .cx-bread { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem; }
.cx2 .cx-back { color:hsl(var(--foreground)); font-size:13px; font-weight:600; }
.cx2 .cx-back:hover { color:var(--cx-primary); }
.cx2 .cx-bread-sep { color:hsl(var(--muted-foreground)); }
.cx2 .cx-bread-cur { font-size:13px; color:hsl(var(--muted-foreground)); }
.cx2 .cx-bread-acts { display:flex; gap:.4rem; }
.cx2 .hero { display:flex; align-items:center; gap:1rem; padding:1.2rem; border:1px solid hsl(var(--border));
  border-radius:16px; background:linear-gradient(180deg, hsl(var(--card)), hsl(var(--background))); margin-bottom:1.2rem; }
.cx2 .hero-av { width:56px; height:56px; font-size:22px; border-radius:14px; }
.cx2 .hero-main { flex:1; min-width:0; }
.cx2 .hero-nome { font-size:18px; font-weight:700; }
.cx2 .hero-status { display:flex; align-items:center; gap:.4rem; font-size:12px; color:hsl(var(--muted-foreground)); margin-top:.2rem; }
.cx2 .hero-stats { display:flex; gap:1.6rem; padding-right:.4rem; }
.cx2 .hero-stat { text-align:center; }
.cx2 .hero-stat b { display:block; font-size:18px; font-weight:700; }
.cx2 .hero-stat span { font-size:11px; color:hsl(var(--muted-foreground)); }

/* seções */
.cx2 .cx-sec { margin-bottom:1.3rem; }
.cx2 .cx-sec-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.cx2 .cx-sec-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:hsl(var(--muted-foreground)); }
.cx2 .cx-empty { font-size:12px; color:hsl(var(--muted-foreground)); padding:.9rem; border:1px dashed hsl(var(--border)); border-radius:12px; text-align:center; }

/* app cards (app ≡ credencial — um card completo por app) */
.cx2 .cx-app-list { display:flex; flex-direction:column; gap:.7rem; }
.cx2 .app-card { border:1px solid hsl(var(--border)); border-radius:14px; background:hsl(var(--card)); padding:1rem 1.1rem; }
.cx2 .app-card-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.cx2 .app-name { font-size:14px; font-weight:600; }
.cx2 .app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.4rem; font-size:12px; }
.cx2 .app-grid > div { display:flex; flex-direction:column; gap:.18rem; }
.cx2 .cx-k { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:hsl(var(--muted-foreground)); }
.cx2 .app-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }

/* badges / tag / selo páginas / cores */
.cx2 .cx-badge, .cx2 .cx-tag, .cx2 .cx-pag { font-size:10px; font-weight:600; padding:.13rem .5rem; border-radius:9999px; white-space:nowrap; }
.cx2 .cx-tag { background:var(--cx-soft); color:var(--cx-primary); }
.cx2 .cx-pag { border:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); }
.cx2 .cx-pag.on { border-color:hsl(var(--info)/.4); background:hsl(var(--info)/.12); color:hsl(var(--info)); }
.cx2 .cx-green { color:hsl(var(--success)); }
.cx2 .cx-red, .cx2 .cx-danger { color:hsl(var(--destructive)); }
.cx2 .cx-yellow { color:hsl(var(--warning)); }
.cx2 .cx-muted { color:hsl(var(--muted-foreground)); }
.cx2 .cx-badge.cx-green { background:hsl(var(--success)/.14); }
.cx2 .cx-badge.cx-red { background:hsl(var(--destructive)/.16); }
.cx2 .cx-badge.cx-yellow { background:hsl(var(--warning)/.14); }
.cx2 .cx-badge.cx-muted { background:hsl(var(--muted)); }

/* cards de criar credencial (atalhos) */
.cx2 .cx-create-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-bottom:.9rem; }
.cx2 .create-card { display:flex; align-items:center; gap:.7rem; text-align:left; padding:.8rem 1rem; border:1px dashed hsl(var(--border));
  border-radius:12px; background:transparent; cursor:pointer; transition:border-color .15s, background .15s; }
.cx2 .create-card:hover { border-color:var(--cx-primary); background:var(--cx-soft); }
.cx2 .create-ic { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;
  background:var(--cx-soft); color:var(--cx-primary); font-size:18px; font-weight:700; flex-shrink:0; }
.cx2 .create-t { font-size:12.5px; font-weight:600; }
.cx2 .create-s { font-size:10.5px; color:hsl(var(--muted-foreground)); }

/* proxy */
.cx2 .proxy-info { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:12px; padding:.8rem 1rem; border:1px solid hsl(var(--border)); border-radius:12px; background:hsl(var(--card)); }