.content-area{padding:2rem 50px}.content-area .title{width:100%;font-size:2rem;font-weight:700;color:var(--gray-900);position:relative;display:inline-block;padding-bottom:.4rem}.content-area .title:before{content:"🎲";padding-right:2px}.content-area .subtitle{width:100%;margin-bottom:2rem}.card-controls{display:flex;padding:0;position:relative;border:1px solid var(--gray-200)}.control-panel{flex:1;padding:2.2rem}.result-panel{flex:1;padding:2.2rem;background-color:var(--gray-100)}.vertical-divider{width:2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2rem 0}.divider-line{flex-grow:1;width:2px;background-color:var(--gray-200)}.divider-dot{width:8px;height:8px;border-radius:50%;background-color:var(--blue-700);margin:.5rem 0}.form-row{margin-bottom:1.5rem}.input-wrapper{display:flex;flex-direction:column}.input-wrapper label{margin-bottom:.5rem;color:var(--gray-600);font-weight:500;font-size:.9rem;text-transform:uppercase;letter-spacing:.05rem}.form-row.range{display:flex;align-items:flex-end;gap:1rem}.range-separator{display:flex;align-items:center;justify-content:center;padding-bottom:.5rem;color:var(--gray-400)}input[type=number]{border:2px solid var(--gray-200);border-radius:8px;padding:.8rem;font-size:1rem;color:var(--gray-900);transition:var(--transition);text-align:center;background-color:var(--white)}input[type=number]:focus{border-color:var(--blue-700);outline:none}.number-control{display:flex;align-items:center}.number-control input{width:70px;text-align:center;border-radius:0;border-left:none;border-right:none}.btn-control{background-color:var(--gray-200);border:2px solid var(--gray-200);color:var(--gray-600);font-size:1.2rem;width:40px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.btn-control.minus{border-radius:8px 0 0 8px;border-right:none}.btn-control.plus{border-radius:0 8px 8px 0;border-left:none}.btn-control:hover{background-color:var(--blue-700);border-color:var(--blue-700);color:var(--white)}.toggle-container{display:flex;align-items:center;justify-content:space-between}.switch{position:relative;display:inline-block;width:50px;height:26px;border:1px solid var(--gray-200);background-color:var(--gray-200);border-radius:20px;outline:none}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-300);transition:var(--transition);border-radius:34px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background-color:var(--white);transition:var(--transition);border-radius:50%;border:1px solid var(--gray-200)}input:checked+.slider{background-color:var(--blue-700)}input:focus+.slider{box-shadow:0 0 1px var(--blue-700)}input:checked+.slider:before{transform:translate(24px)}.btn-generate{background-color:var(--blue-700);color:var(--white);border:none;border-radius:var(--border-radius);padding:1rem;width:100%;font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-generate:hover{background-color:#332fa8;transform:translateY(-2px)}.btn-generate:active{transform:translateY(0)}.btn-generate i{font-size:1.2rem}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.result-header h3{color:var(--blue-700);font-size:1.2rem}.btn-clear{background:none;border:none;color:var(--gray-500);cursor:pointer;font-size:1rem;padding:.5rem;transition:var(--transition)}.btn-clear:hover{color:var(--red-500)}.result-content{min-height:250px;border-radius:var(--border-radius);padding:1rem 0;overflow-y:auto;max-height:350px}.result-number{background-color:var(--white);margin-bottom:.8rem;padding:1rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;transform-origin:center;animation:scaleIn .4s ease-out}.number-label{font-weight:600;color:var(--blue-700);font-size:.9rem}.number-value{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;color:var(--gray-400);text-align:center}.empty-state i{font-size:3rem;margin-bottom:1rem;opacity:.5}.info-panel{background-color:var(--yellow-100);padding:.8rem 2rem;color:var(--gray-600);font-size:.9rem;display:flex;align-items:center;border-radius:5px;margin-bottom:10px}.info-panel i{margin-right:.5rem;color:var(--yellow-700)}.footer{margin-top:0}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.card-controls{flex-direction:column}.vertical-divider{width:100%;height:2px;flex-direction:row;padding:0 2rem}.divider-line{width:100%;height:2px}.divider-dot{width:8px;height:8px;margin:0 .5rem}.form-row.range{flex-direction:column;gap:1.5rem}.range-separator{display:none}}