.area-tool-page{padding-top:80px}.area-tool-hero{text-align:center;padding:2.5rem 0 1.5rem}.area-tool-title{font-size:1.75rem;font-weight:700;margin-bottom:.25rem;color:#1a1a1a}.area-tool-subtitle{font-size:1rem;color:#666;margin-bottom:0}.area-tool-wrapper{padding:0 0 3rem;max-width:900px;margin:0 auto;min-height:calc(80vh - 160px);display:flex;align-items:center}.area-tool-wrapper>.container{width:100%}.area-tool-layout{display:flex;gap:2.5rem;align-items:center}.area-tool-inputs{flex:0 0 400px;max-width:400px}.area-tool-canvas-wrap{flex:1;min-height:400px;position:relative}.area-tool-canvas-wrap canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}.area-tool-currency{display:flex;justify-content:flex-end;gap:1rem;margin-bottom:.75rem;font-size:.95rem}.area-tool-radio{cursor:pointer;display:flex;align-items:center;gap:.3rem}.area-tool-group{margin-bottom:1rem}.area-tool-group .input-group>*{border-radius:0}.area-tool-group .input-group:first-child>:first-child{border-top-left-radius:.5rem}.area-tool-group .input-group:first-child>:last-child{border-top-right-radius:.5rem}.area-tool-group .input-group:last-child>:first-child{border-bottom-left-radius:.5rem}.area-tool-group .input-group:last-child>:last-child{border-bottom-right-radius:.5rem}.area-tool-group .input-group+.input-group>*{border-top:0}.area-tool-group .form-control,.area-tool-group .input-group-text{font-size:1.15rem;padding:.75rem 1rem}.area-tool-group .input-group-text.prepend{width:100px;font-weight:600;background:#f8f9fa}.area-tool-group .price-display{font-size:.8rem;color:#28a745;font-weight:600;min-width:50px;background:#fff}.area-tool-group .price-display:empty{min-width:0;padding:0;border:0}.area-tool-content{background:#f8f9fa;padding:3rem 0;border-top:1px solid #eee}.area-tool-article{font-size:1.05rem;line-height:1.8;color:#444}.area-tool-article h2{font-size:1.4rem;font-weight:700;margin-top:2rem;margin-bottom:.75rem;color:#1a1a1a}.area-tool-article img{width:100%;height:auto;border-radius:10px}@media (max-width:768px){.area-tool-layout{flex-direction:column}.area-tool-inputs{flex:none;max-width:100%;width:100%}.area-tool-canvas-wrap{min-height:250px;width:100%}.area-tool-title{font-size:1.4rem}.area-tool-group .form-control,.area-tool-group .input-group-text{font-size:1rem;padding:.6rem .75rem}.area-tool-group .input-group-text.prepend{width:85px}.area-tool-hero{padding:1.5rem 0 1rem}}