.calculator-page-wrapper{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center}.calculator-content-wrapper{width:100%;max-width:800px;padding:20px}.calculator-container h1{text-align:center;color:#2c3e50;margin-bottom:30px;font-size:2rem}.percentage-mode-selector{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}.mode-btn{padding:10px 16px;background-color:#ecf0f1;border:2px solid #bdc3c7;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:#2c3e50;transition:all .3s ease;white-space:nowrap}.mode-btn:hover{background-color:#d5dbdb;transform:translateY(-2px)}.mode-btn.active{background-color:#3498db;color:white;border-color:#2980b9}.percentage-calculator-body{background:white;border-radius:12px;padding:30px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.mode-title{text-align:center;color:#3498db;margin-bottom:25px;font-size:1.4rem}.percentage-input-group{margin-bottom:20px}.percentage-input-group label{display:block;margin-bottom:8px;color:#2c3e50;font-weight:600;font-size:16px}.percentage-input{width:100%;padding:12px 15px;font-size:18px;border:2px solid #bdc3c7;border-radius:8px;box-sizing:border-box;transition:border-color .3s ease}.percentage-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px rgba(52,152,219,.1)}.percentage-button-group{display:flex;gap:12px;margin-top:25px}.calculate-btn,.clear-btn{flex:1 1;padding:14px 20px;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.calculate-btn{background-color:#27ae60;color:white}.calculate-btn:hover{background-color:#229954;transform:translateY(-2px);box-shadow:0 4px 8px rgba(39,174,96,.3)}.clear-btn{background-color:#e74c3c;color:white}.clear-btn:hover{background-color:#c0392b;transform:translateY(-2px);box-shadow:0 4px 8px rgba(231,76,60,.3)}.error-message{margin-top:15px;padding:12px;background-color:#fee;border:1px solid #fcc;border-radius:8px;color:#c0392b;text-align:center;font-weight:500}.percentage-result{margin-top:25px;padding:20px;background-color:#e8f8f5;border:2px solid #27ae60;border-radius:12px;text-align:center}.percentage-result h3{margin:0 0 10px;color:#2c3e50;font-size:1.2rem}.result-value{font-size:2.5rem;font-weight:700;color:#27ae60;margin:15px 0}.visual-toggle-btn{margin-top:15px;padding:10px 25px;background-color:#3498db;color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease}.visual-toggle-btn:hover{background-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 8px rgba(52,152,219,.3)}.loading-visual{text-align:center;padding:40px;color:#7f8c8d;font-style:italic}@media (max-width:767px){.calculator-content-wrapper{padding:15px}.calculator-container h1{font-size:1.6rem;margin-bottom:20px}.percentage-mode-selector{gap:6px}.mode-btn{padding:8px 12px;font-size:12px}.percentage-calculator-body{padding:20px 15px}.mode-title{font-size:1.2rem}.percentage-input{font-size:16px;padding:10px 12px}.percentage-button-group{flex-direction:column}.calculate-btn,.clear-btn{width:100%}.result-value{font-size:2rem}}@media (max-width:375px){.mode-btn{padding:6px 10px;font-size:11px}.calculator-container h1{font-size:1.4rem}.mode-title{font-size:1.1rem}.result-value{font-size:1.8rem}}