/* ===== Minimal, robust, dunkel ===== */
#aliasSug{
  --gap:10px;
  --h:42px;
  --label:14px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-clr,#e6e7eb);
}
#aliasSug *{ box-sizing:border-box; }

/* Subtext */
#aliasSug .sub{ margin:4px 0 16px 0; color:var(--secondary-text-clr,#9aa1ad); font-size:14px; }

/* === Wort-Zeile (3 Inputs + 3 ↻) === */
#aliasSug .wrow{
  display:grid;
  grid-template-columns:1fr 42px 1fr 42px 1fr 42px;
  gap:var(--gap);
  align-items:center;
}
#aliasSug .wgrp{ display:flex; flex-direction:column; min-width:0; }
#aliasSug .wgrp label{ font-size:12px; color:var(--secondary-text-clr,#9aa1ad); margin:0 0 4px 0; }
#aliasSug .wgrp input[type="text"]{
  height:var(--h); width:100%; min-width:0; padding:0 12px; font-size:14px;
  color:var(--text-clr,#e6e7eb);
  background:var(--panel-clr,#2c2f36);
  border:1px solid #3b404c; border-radius:10px;
}
#aliasSug .wgrp input::placeholder{ color:#9aa1ad; }

/* ↻ Icon */
#aliasSug .icon{
  width:var(--h); height:var(--h); display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--accent-clr,#66d9ef);
  font-size:20px; cursor:pointer; padding:0;
}

/* === Controls (Separator + Digits + Generate) === */
#aliasSug .crow{
  display:grid;
  grid-template-columns:30% 30% 1fr;
  gap:var(--gap);
  align-items:end;
  margin-top:var(--gap);
  padding-right:42px;
}
#aliasSug .ctrlgrp{ display:flex; flex-direction:column; }
#aliasSug .ctrlgrp label{ font-size:12px; color:var(--secondary-text-clr,#9aa1ad); margin:0 0 4px 0; }

#aliasSug select,
#aliasSug input[type="text"].digits{
  height:var(--h); width:100%; padding:0 12px; font-size:14px;
  color:var(--text-clr,#e6e7eb);
  background:var(--panel-clr,#2c2f36);
  border:1px solid #3b404c; border-radius:10px;
}

/* Buttons – gleiche Optik, Border in --accent-clr */
#aliasSug .btnwrap{ display:flex; justify-content:flex-end; align-items:center; height:var(--h); }
#aliasSug .btn,
#aliasSug .cancelBtn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 16px; min-width:130px; font-size:14px; white-space:nowrap;
  color:var(--text-clr,#e6e7eb);
  background:transparent;
  border:1px solid var(--accent-clr,#66d9ef);
  border-radius:10px; cursor:pointer;
}

/* === Ergebnis-Karten === */
#aliasSug .reshead{ margin-top:14px; font-weight:700; }
#aliasSug .cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px; margin-top:12px;
}
#aliasSug .card{
  border:1px solid #2f3441; border-radius:12px; padding:12px;
  background:rgba(255,255,255,0.02); display:flex; flex-direction:column; gap:8px;
}
#aliasSug .alias{ font-weight:600; font-size:16px; letter-spacing:.2px; }
#aliasSug .note{ color:var(--secondary-text-clr,#9aa1ad); font-size:12px; }
#aliasSug .warn{ color:#ff6b6b; font-size:12px; margin-top:6px; }

/* === Mobile === */
@media (max-width:480px){
  #aliasSug{ --gap:8px; --h:38px; }
  #aliasSug .wrow{ grid-template-columns:1fr 38px 1fr 38px 1fr 38px; }
  #aliasSug .icon{ width:var(--h); height:var(--h); font-size:19px; }
  #aliasSug .wgrp input[type="text"]{ font-size:13px; padding:0 10px; }

  #aliasSug .crow{ grid-template-columns:35% 35% 1fr; padding-right:38px; }
  #aliasSug select, #aliasSug input[type="text"].digits{ font-size:13px; padding:0 10px; }
  #aliasSug .btn, #aliasSug .cancelBtn{ min-width:110px; font-size:13px; }

  #aliasSug .cards{ grid-template-columns:repeat(2,1fr); }
}