@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

.ng-wrap{
  max-width:660px;
  margin:0 auto;
  padding:32px 20px 48px;
  font-family:'Inter',sans-serif;
  color:#1a1a2e;
}

.ng-head{
  text-align:center;
  margin-bottom:28px;
}
.ng-heading{
  font-size:22px;
  font-weight:600;
  color:#1a1a2e;
  margin-bottom:5px;
}
.ng-sub{
  font-size:14px;
  color:#6b6b80;
}

.ng-main-input{
  width:100%;
  padding:14px 18px;
  border:1.5px solid #d0cce8;
  border-radius:12px;
  font-size:15px;
  font-family:'Inter',sans-serif;
  background:#fff;
  color:#1a1a2e;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  margin-bottom:10px;
  display:block;
}
.ng-main-input:focus{
  border-color:#3c1e8d;
  box-shadow:0 0 0 3px rgba(60,30,141,0.1);
}
.ng-main-input::placeholder{color:#a09abf}

.ng-examples{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:24px;
}
.ng-ex-label{
  font-size:12px;
  color:#a09abf;
  width:100%;
  margin-bottom:2px;
}
.ng-ex{
  padding:5px 12px;
  border-radius:999px;
  border:1px solid #e2ddf5;
  background:#faf8ff;
  color:#5a5278;
  font-size:12px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
}
.ng-ex:hover{
  border-color:#3c1e8d;
  color:#3c1e8d;
  background:#f0ecff;
}

.ng-sec-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#8b82aa;
  margin-bottom:10px;
}

.ng-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
}
.ng-pill{
  padding:9px 20px;
  border-radius:999px;
  border:2px solid transparent;
  font-size:13px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  cursor:pointer;
  transition:all .18s;
  user-select:none;
  opacity:0.72;
}
.ng-pill:hover{
  opacity:1;
  transform:translateY(-1px);
}
.ng-pill.ng-sel{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.ng-pill-any{background:#f0ecff;color:#3c1e8d;border-color:#c4b5f4}
.ng-pill-any.ng-sel{background:#3c1e8d;color:#fff;border-color:#3c1e8d}

.ng-pill-one{background:#fff8e6;color:#92600a;border-color:#f5c518}
.ng-pill-one.ng-sel{background:#f5c518;color:#1a0e4e;border-color:#f5c518}

.ng-pill-two{background:#e8f5e9;color:#1b5e20;border-color:#66bb6a}
.ng-pill-two.ng-sel{background:#43a047;color:#fff;border-color:#43a047}

.ng-pill-eg{opacity:0.6;font-size:11px;font-weight:400}

.ng-gen-btn{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:2px solid #0ea5e9;
  background:#0ea5e9;
  color:#fff;
  font-size:15px;
  font-weight:700;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:opacity .15s,transform .15s;
}
.ng-gen-btn:hover{
  opacity:0.88;
  transform:translateY(-1px);
}
.ng-gen-btn:active{transform:translateY(0)}

#ng-loader{
  display:none;
  text-align:center;
  padding:32px 0;
}
.ng-loader-ring{
  width:34px;
  height:34px;
  border:2.5px solid #e2ddf5;
  border-top-color:#3c1e8d;
  border-radius:50%;
  animation:ng-spin .7s linear infinite;
  margin:0 auto 12px;
}
@keyframes ng-spin{to{transform:rotate(360deg)}}
.ng-loader-txt{font-size:13px;color:#8b82aa}

#ng-results{
  display:none;
  margin-top:24px;
}
.ng-results-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:12px 0 16px;
}
@media(max-width:500px){
  .ng-results-grid{grid-template-columns:repeat(2,1fr)}
}
.ng-rcard{
  border:1.5px solid #e2ddf5;
  border-radius:12px;
  padding:16px 8px;
  text-align:center;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.ng-rcard:hover{
  border-color:#3c1e8d;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(60,30,141,0.1);
}
.ng-rcard.ng-copied{border-color:#16a34a}
.ng-rname{
  font-size:14px;
  font-weight:600;
  color:#1a1a2e;
  margin-bottom:3px;
  word-break:break-word;
}
.ng-rsub{
  font-size:11px;
  color:#a09abf;
  transition:color .15s;
}
.ng-rcard:hover .ng-rsub{color:#3c1e8d}
.ng-rcard.ng-copied .ng-rsub{color:#16a34a}

.ng-act-row{
  display:flex;
  gap:8px;
}
.ng-abtn{
  flex:1;
  padding:11px;
  border-radius:10px;
  border:1.5px solid #d0cce8;
  background:#fff;
  color:#6b6b80;
  font-size:13px;
  font-weight:500;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s;
}
.ng-abtn:hover{
  border-color:#3c1e8d;
  color:#3c1e8d;
}
.ng-abtn-primary{
  background:#3c1e8d;
  border-color:#3c1e8d;
  color:#fff;
  font-weight:600;
}
.ng-abtn-primary:hover{opacity:0.88}