body { font-family: Arial, sans-serif; background: #f3f4f6; margin: 0; }
.container-pod { max-width: 1250px; margin: 0.8rem auto; padding: 1rem; background: #fff; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
.btn-gradient { background: linear-gradient(90deg, #553c9a, #ee4b2b); color: #fff; border: none; transition: none!important; }
.btn-gradient:hover { opacity: .9!important; }
.loader-border { width: 1rem; height: 1rem; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spinner 0.6s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }
.textarea-wrapper { position: relative; }
.textarea-dice-icon { position: absolute; top: 35px; right: 10px; color: #000; cursor: pointer; z-index: 10; }
.custom-scroll::-webkit-scrollbar { height: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; }
.draft-btn.active { background-color: #553c9a!important; color: #fff!important; }
#lengthSlider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #553c9a, #ee4b2b); }
#lengthSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #fff; border: 2px solid #553c9a; border-radius: 50%; cursor: pointer; margin-top: -4px; }
#lengthSlider::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #553c9a, #ee4b2b); }
#lengthSlider::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 2px solid #553c9a; border-radius: 50%; cursor: pointer; }
.step {
background-color: #f9f9f9;
padding: 20px;
}
@media screen and (max-width: 768px) {
.step {
padding: 15px;
margin-bottom: 20px;
max-width: 100%;
overflow-x: hidden;
}
}
.step-description {
font-size: 16px;
color: #666;
}