/* Premium connection screen polish — scoped so the dark workspace is untouched. */
.ldp-dark-shell:has(> header + section) > section{
  max-width:980px!important;
  padding-top:34px!important;
}

.ldp-dark-shell:has(> header + section) > section > div:first-child{
  position:relative;
  padding-left:2px;
}

.ldp-dark-shell:has(> header + section) > section > div:first-child::before{
  content:"INTEGRAÇÕES";
  display:inline-flex;
  align-items:center;
  margin-bottom:10px;
  padding:5px 9px;
  border:1px solid rgba(0,158,73,.18);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#007A3D;
  box-shadow:0 8px 20px rgba(0,91,55,.06);
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  backdrop-filter:blur(10px);
}

.ldp-dark-shell:has(> header + section) > section > div:first-child h1{
  font-size:30px!important;
  line-height:1.05!important;
  color:#003B82!important;
}

.ldp-dark-shell:has(> header + section) > section > div:first-child p{
  margin-top:8px!important;
  color:#536785!important;
}

/* Real integration list wrapper — robust even when the notice block is absent. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3{
  position:relative;
  margin-top:24px!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(249,253,255,.72))!important;
  box-shadow:0 30px 75px rgba(0,91,55,.16),0 2px 10px rgba(0,59,130,.04)!important;
  backdrop-filter:blur(18px);
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3::before{
  content:"";
  position:absolute;
  inset:8px 8px auto 8px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,82,204,.16),rgba(0,158,73,.14),transparent);
}

/* Shared card foundation. Each item defines its own accent variables below. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div{
  --accent:#0052CC;
  --accent-soft:#EEF5FF;
  --accent-border:rgba(0,82,204,.20);
  --accent-shadow:rgba(0,82,204,.08);
  position:relative;
  overflow:hidden;
  border:1px solid var(--accent-border)!important;
  border-radius:18px!important;
  background:linear-gradient(100deg,var(--accent-soft) 0%,#fff 21%,#fff 100%)!important;
  color:#10233F!important;
  box-shadow:inset 4px 0 0 var(--accent),0 9px 24px var(--accent-shadow)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:hover{
  transform:translateY(-2px)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 4px 0 0 var(--accent),0 16px 34px var(--accent-shadow)!important;
}

/* GitHub */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(1){
  --accent:#171B22;
  --accent-soft:#F2F4F7;
  --accent-border:rgba(23,27,34,.16);
  --accent-shadow:rgba(23,27,34,.08);
}

/* Supabase */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(2){
  --accent:#19A974;
  --accent-soft:#ECFFF6;
  --accent-border:rgba(25,169,116,.22);
  --accent-shadow:rgba(25,169,116,.10);
}

/* OpenAI */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(3){
  --accent:#10A37F;
  --accent-soft:#EDFBF7;
  --accent-border:rgba(16,163,127,.22);
  --accent-shadow:rgba(16,163,127,.10);
}

/* Claude */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(4){
  --accent:#D97757;
  --accent-soft:#FFF4EF;
  --accent-border:rgba(217,119,87,.24);
  --accent-shadow:rgba(217,119,87,.10);
}

/* Gemini */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(5){
  --accent:#4B6BFB;
  --accent-soft:#F1F3FF;
  --accent-border:rgba(75,107,251,.22);
  --accent-shadow:rgba(75,107,251,.10);
}

/* Icon tile */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:first-child{
  position:relative;
  width:46px!important;
  height:46px!important;
  border:1px solid var(--accent-border)!important;
  border-radius:14px!important;
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 7px 18px var(--accent-shadow)!important;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:first-child svg{
  color:var(--accent)!important;
  stroke-width:2.2!important;
}

/* Give the three AI providers distinct recognizable marks instead of the same sparkle icon. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(n+3) > div > div:first-child > div:first-child svg{
  display:none!important;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(n+3) > div > div:first-child > div:first-child::after{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:var(--accent);
  font-size:22px;
  font-weight:900;
  line-height:1;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(3) > div > div:first-child > div:first-child::after{content:"◎";font-size:27px}
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(4) > div > div:first-child > div:first-child::after{content:"✹";font-size:25px}
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div:nth-child(5) > div > div:first-child > div:first-child::after{content:"✦";font-size:25px}

/* Provider name and description hierarchy. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:nth-child(2) > div:first-child{
  color:#112743!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:nth-child(2) > div:nth-child(2){
  color:#718096!important;
}

/* Buttons follow the provider accent. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div button{
  min-width:104px;
  border:1px solid var(--accent-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--accent)!important;
  font-weight:800!important;
  box-shadow:0 5px 14px var(--accent-shadow)!important;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div button:hover{
  background:var(--accent)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 9px 20px var(--accent-shadow)!important;
}

/* Connected state remains unmistakably green. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 .text-emerald-400,
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 .text-emerald-500,
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 .text-emerald-600{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:#E8FFF2!important;
  color:#008B45!important;
  font-weight:800!important;
}

/* Decorative color chips make the card area feel deliberate without becoming noisy. */
.ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3::after{
  content:"";
  position:absolute;
  right:18px;
  top:-9px;
  width:62px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,#0052CC 0 31%,#FFC107 31% 64%,#009E49 64% 100%);
  box-shadow:0 7px 18px rgba(0,59,130,.12);
}

@media (max-width:720px){
  .ldp-dark-shell:has(> header + section) > section > div:first-child h1{font-size:25px!important}
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3{padding:10px!important;border-radius:20px!important}
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div{border-radius:15px!important}
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div{gap:10px!important}
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div button{min-width:88px!important;padding-left:10px!important;padding-right:10px!important}
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3::after{right:14px;width:48px}
}