/* ============================================================
   Datylux — Step 1 "Connect / Import" graphic (rebuilt from PNG)
   Scoped under .connect. Uses --accent so the Tweaks accent recolors it.
   ============================================================ */
.connect{
  --c-accent:var(--accent,#1677ff);
  --c-bg:#070e1b;
  --c-panel:#0c1828;
  --c-panel2:#0e1c2f;
  --c-border:rgba(120,160,210,.16);
  --c-border2:rgba(120,160,210,.10);
  --c-txt:#eaf2fc;
  --c-txt2:#9fb3cc;
  --c-txt3:#7188a4;

  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:30px;align-items:start;
  padding:46px 46px 52px;
  border-radius:22px;text-align:left;
  background:
    radial-gradient(120% 90% at 88% 6%,rgba(22,90,200,.16),transparent 55%),
    linear-gradient(160deg,var(--c-panel2),var(--c-bg));
  border:1px solid var(--c-border);
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.connect > *{min-width:0;}

/* decorative curved arrow */
.connect__arrow{position:absolute;left:39%;top:30%;width:120px;height:150px;z-index:7;pointer-events:none;color:var(--c-accent);opacity:.85;}
.connect__arrow svg{width:100%;height:100%;overflow:visible;}

/* ---------- left column ---------- */
.connect__left{position:relative;z-index:3;display:flex;flex-direction:column;}
.num-badge{
  width:62px;height:62px;border-radius:15px;display:grid;place-items:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:var(--c-accent);
  border:1.5px solid color-mix(in srgb,var(--c-accent) 70%,transparent);
  background:color-mix(in srgb,var(--c-accent) 12%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--c-accent) 30%,transparent),inset 0 0 18px color-mix(in srgb,var(--c-accent) 14%,transparent);
}
.connect__title{
  margin:26px 0 0;font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(30px,3.5vw,48px);line-height:1.0;letter-spacing:-.02em;
}
.connect__title .w{display:block;color:var(--c-txt);}
.connect__title .b{
  display:block;color:transparent;
  background:linear-gradient(96deg,var(--c-accent),#2aa8ff 55%,#13d8ff);
  -webkit-background-clip:text;background-clip:text;
}
.connect__lede{
  margin:22px 0 0;max-width:330px;color:var(--c-txt2);
  font-size:clamp(15px,1.15vw,18px);line-height:1.55;
}
.connect__feats{list-style:none;margin:auto 0 0;padding:34px 0 0;display:flex;flex-direction:column;gap:20px;}
.connect__feats li{display:flex;align-items:center;gap:15px;}
.feat-ic{
  width:50px;height:50px;flex:none;border-radius:13px;display:grid;place-items:center;color:var(--c-accent);
  border:1px solid color-mix(in srgb,var(--c-accent) 28%,transparent);
  background:color-mix(in srgb,var(--c-accent) 9%,transparent);
}
.feat-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.connect__feats .ft{color:var(--c-txt);font-size:clamp(15px,1.15vw,17px);line-height:1.32;font-weight:500;}

/* ---------- right column / cards ---------- */
.connect__right{position:relative;z-index:3;display:flex;flex-direction:column;}
.card{
  border-radius:17px;border:1px solid var(--c-border);
  background:linear-gradient(165deg,var(--c-panel),color-mix(in srgb,var(--c-bg) 70%,#000 4%));
  box-shadow:0 24px 54px rgba(0,0,0,.42);
}
.card--platforms{padding:22px 22px 14px;}
.card__head{display:flex;align-items:center;gap:11px;}
.card__head .hic{width:21px;height:21px;color:var(--c-accent);flex:none;}
.card__head .hic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.card__head h4{font-size:clamp(16px,1.3vw,19px);font-weight:700;color:var(--c-txt);letter-spacing:-.01em;}
.card__sub{margin:11px 0 0;color:var(--c-txt2);font-size:13.5px;line-height:1.5;}

.plat-list{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.plat-item{
  display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--c-border2);background:rgba(255,255,255,.018);
}
.plat-badge{
  width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;letter-spacing:.02em;
  background:linear-gradient(155deg,#2f8bff,#0f5fd6);box-shadow:0 4px 12px rgba(15,95,214,.4);
}
.plat-name{font-size:15px;color:var(--c-txt);font-weight:600;margin-right:auto;}
.connect-btn{
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:8px 18px;border-radius:9px;color:#fff;
  background:linear-gradient(155deg,#2f8bff,#1366e0);border:1px solid color-mix(in srgb,var(--c-accent) 60%,transparent);
  box-shadow:0 4px 12px rgba(20,100,224,.32);transition:transform .15s,box-shadow .15s,filter .15s;
}
.connect-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 7px 16px rgba(20,100,224,.42);}

/* overlapping import card */
.card--import{
  position:relative;z-index:6;margin-top:-46px;margin-left:-32%;width:132%;
  padding:22px 24px 22px;
  background:linear-gradient(165deg,#0e1d30,#091422);
  border:1px solid rgba(120,160,210,.2);
  box-shadow:0 34px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
.dropzone{
  margin-top:18px;border:1.6px dashed color-mix(in srgb,var(--c-accent) 45%,rgba(120,160,210,.4));
  border-radius:14px;padding:26px 20px;text-align:center;
  background:color-mix(in srgb,var(--c-accent) 5%,transparent);
}
.dropzone .dz-file{display:block;width:34px;height:34px;margin:0 auto 12px;color:var(--c-txt2);}
.dropzone .dz-file svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.dz-main{font-size:16px;color:var(--c-txt);font-weight:500;}
.dz-main b{color:var(--c-accent);font-weight:700;cursor:pointer;}
.dz-sub{margin-top:8px;font-size:12.5px;color:var(--c-txt3);line-height:1.5;}
.card__actions{margin-top:18px;display:flex;justify-content:flex-end;gap:11px;}
.btn-cancel{
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:10px 22px;border-radius:10px;
  color:var(--c-txt);background:rgba(255,255,255,.03);border:1px solid var(--c-border);transition:background .15s,border-color .15s;
}
.btn-cancel:hover{background:rgba(255,255,255,.07);border-color:rgba(120,160,210,.34);}
.btn-import{
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:10px 26px;border-radius:10px;color:#fff;
  background:linear-gradient(155deg,#2f8bff,#1366e0);border:1px solid color-mix(in srgb,var(--c-accent) 60%,transparent);
  box-shadow:0 6px 16px rgba(20,100,224,.36);transition:transform .15s,filter .15s;
}
.btn-import:hover{transform:translateY(-1px);filter:brightness(1.08);}

.connect--csv-only{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.08fr);
  min-height:560px;
  align-items:center;
}
.connect--csv-only .connect__feats{margin:34px 0 0;padding-top:0;}
.connect--csv-only .connect__right{justify-content:center;}
.connect--csv-only .card--import{
  width:100%;
  margin:0;
  padding:28px;
}
.connect--csv-only .dropzone{padding:42px 24px;}

/* ---------- responsive: stack into a mobile-native column ---------- */
@media(max-width:860px){
  .connect{grid-template-columns:1fr;gap:26px;padding:30px 22px 34px;}
  .connect__arrow{display:none;}
  .connect__lede{max-width:none;}
  .connect__feats{padding-top:6px;}
  .card--import{margin-left:0;width:100%;margin-top:16px;}
  .connect--csv-only{min-height:0;}
  .connect--csv-only .card--import{margin-top:0;}
}
@media(max-width:560px){
  .connect{padding:24px 16px 28px;}
  .num-badge{width:54px;height:54px;font-size:21px;}
  .card--platforms{padding:18px 16px 12px;}
  .card--import{padding:18px 16px;}
  .plat-item{padding:10px 11px;gap:11px;}
  .plat-badge{width:34px;height:34px;}
  .connect-btn{padding:7px 14px;}
  .card__actions{justify-content:stretch;}
  .card__actions .btn-cancel,.card__actions .btn-import{flex:1;}
}