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