.fc-wrapper{
  min-height: 60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #0b1b3f 0%, #0e2a66 100%);
  padding: 40px 16px;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.fc-card{
  background:#ffffff;
  color:#0b1b3f;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 24px;
  max-width: 760px;
  width:100%;
}
.fc-card h2{
  margin-top:0;
  font-size: 24px;
}
.fc-form{
  display:flex;
  gap:12px;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}
.fc-input{
  flex:1 1 420px;
  padding:12px 14px;
  border:1px solid #d8e0ff;
  border-radius:12px;
  font-size:16px;
}
.fc-button{
  background:#00D47E;
  color:#0b1b3f;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  font-weight:600;
}
.fc-button:hover{ opacity:.92; }
.fc-result{
  margin-top: 16px;
  background: #f7f9ff;
  border: 1px solid #e3e9ff;
  border-radius: 14px;
  padding: 16px;
}
.fc-preview{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin-top:12px;
}
.fc-preview .box{
  background:#fff;
  border:1px solid #e6ebff;
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.fc-preview .box img{
  image-rendering: pixelated;
  /* show real size without scaling container */
  max-width:none;
}
.fc-list{
  margin: 8px 0 0 20px;
}
.fc-footer{
  color:#cdd6ff;
  text-align:center;
  font-size:12px;
  margin-top: 12px;
}