.percentage-calculator{max-width:800px;min-height:300px;margin:20px auto 40px;padding:20px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgb(0 0 0 / .08)}.percentage-calculator h2{text-align:center;color:#1f2937;margin-top:0;margin-bottom:15px;font-size:26px}.calculator-grid{display:grid;grid-template-columns:2fr 3fr;gap:30px}.input-section,.result-section{display:flex;flex-direction:column;gap:20px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:500;color:#4b5563}.percentage-calculator input[type="text"]{padding:9px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;background-color:#fff;color:#1f2937;transition:border-color 0.2s,box-shadow 0.2s}.percentage-calculator input[type="text"]:hover,.percentage-calculator input[type="text"]:active{border-color:#a9a9a9;background-color:#fff;border-radius:8px}.percentage-calculator input[type="text"]:focus{outline:none;border-color:#52b5e6;box-shadow:0 0 0 1px rgb(0 114 170 / .15);background-color:#fff;border-radius:8px}.result-card{border-radius:12px;padding:20px;border:1px solid #ddd;height:100%}.result-card h3{margin-top:0;color:#1f2937;border-bottom:1px solid #e5e7eb;padding-bottom:10px;font-size:20px}.result-display{font-size:18px;margin:20px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#ac2020;gap:8px}.result-output{color:green;font-weight:500}.calculation-steps{background:#f0f4ff;padding:12px 15px;border-radius:8px;font-size:14px;color:#374151;visibility:hidden}.calculation-steps p{margin:8px 0}.result-buttons{display:flex;gap:10px;margin-top:20px;justify-content:center}.calc-action-btn{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-weight:500;font-size:16px;transition:background-color 0.2s,transform 0.1s;background:#f3f4f6}.calc-action-btn:active{transform:scale(.98)}#copy-btn,#reset-btn{background-color:#0072aa;color:#fff;border-color:#0072aa}#copy-btn:hover,#reset-btn:hover,.calc-action-btn:focus{background-color:#0072aa;border-color:#0072aa;box-shadow:none;outline:none}.select-group{display:block}#calc-type-label{display:block;margin-bottom:6px;color:#4b5563;font-weight:500;font-size:16px}.percentage-calculator .select-group select{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8L10 12L14 8' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 5px center;background-size:24px 24px;cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s}.percentage-calculator .select-group select:hover,.percentage-calculator .select-group select:active{border-color:#a9a9a9;background-color:#fff;border-radius:8px}.percentage-calculator .select-group select:focus{outline:none;border-color:#52b5e6;box-shadow:0 0 0 1px rgb(0 114 170 / .15);background-color:#fff;border-radius:8px}.faq-list{margin-top:1rem}.faq-list dt{font-weight:500;font-size:1.1em}.faq-list dd{margin-left:0;margin-top:.5rem;margin-bottom:1rem;padding-left:1rem;padding-bottom:10px;border-bottom:1px dashed #ddd}@media (max-width:768px){.percentage-calculator{box-shadow:none;border-radius:0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin:0 auto 40px;padding:20px 0}.calculator-grid{grid-template-columns:1fr;gap:10px}.select-group select{width:100%;font-size:16px}.input-group input{padding:12px;font-size:16px}.result-card{height:100%;border:none;border-radius:0;padding:20px 0}.result-section{min-width:0}.calculation-steps{overflow-x:auto;padding:12px 15px;font-size:15px}.calculation-steps p{white-space:nowrap;margin:8px 0}}