:root{
    --kpr-primary:#0056b3;
    --kpr-primary-dark:#003d82;
    --kpr-secondary:#f8f9fa;
    --kpr-accent:#ff6b00;
    --kpr-text:#2d3748;
    --kpr-text-light:#4a5568;
    --kpr-border:#e2e8f0;
    --kpr-success:#38a169;
    --kpr-error:#e53e3e;
    --kpr-warning:#dd6b20;
    --kpr-info:#3182ce;
    --kpr-bg:#f7fafc;
    --kpr-card-bg:#ffffff;
    --kpr-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)
}

.kpr-simulator-container{
    font-family:Poppins,sans-serif;
    max-width:800px;
    margin:2rem auto;
    background:var(--kpr-card-bg);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--kpr-shadow);
    color:var(--kpr-text)
}

.kpr-header{
    background:linear-gradient(135deg,var(--kpr-primary),var(--kpr-primary-dark));
    color:#fff;
    padding:2rem;
    text-align:center
}

.kpr-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin-bottom:1rem
}

.kpr-logo svg{
    width:48px;
    height:48px
}

.kpr-logo h1{
    font-size:1.75rem;
    font-weight:700;
    margin:0
}

.kpr-logo h1 span{
    font-weight:600;
    opacity:.9
}

.kpr-tagline{
    font-size:1rem;
    opacity:.9;
    margin:.5rem 0 0
}

.kpr-content-wrapper{
    padding:2rem
}

.kpr-tabs{
    display:flex;
    background:var(--kpr-secondary);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:1.5rem
}

.kpr-tab{
    flex:1;
    padding:.75rem 1rem;
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
    font-weight:600;
    color:var(--kpr-text-light);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    transition:all .3s ease
}

.kpr-tab svg{
    width:20px;
    height:20px
}

.kpr-tab.active{
    background:var(--kpr-primary);
    color:#fff
}

.kpr-form-group{
    margin-bottom:1.5rem
}

.kpr-form-group label{
    display:block;
    margin-bottom:.5rem;
    font-weight:600;
    color:var(--kpr-text)
}

.kpr-input-group{
    position:relative;
    display:flex;
    align-items:center
}

.kpr-input-group .kpr-percent{
    position:absolute;
    right:12px;
    color:var(--kpr-text-light);
    font-weight:500
}

.kpr-input-group input{
    width:100%;
    padding:.75rem 1rem;
    border:1px solid var(--kpr-border);
    border-radius:8px;
    font-size:1rem;
    transition:all .3s ease
}

.kpr-input-group input:focus{
    outline:none;
    border-color:var(--kpr-primary);
    box-shadow:0 0 0 3px rgba(0,86,179,.1)
}

.kpr-currency-input{
    padding-left:1rem!important
}

.kpr-currency-input.has-value::before{
    content:attr(data-prefix);
    position:absolute;
    left:12px;
    color:var(--kpr-text-light)
}

.kpr-rate-options{
    display:flex;
    gap:.5rem
}

.kpr-rate-type{
    flex:1;
    max-width:120px;
    padding:.5rem;
    border:1px solid var(--kpr-border);
    border-radius:8px;
    font-size:.875rem
}

.kpr-dp-percentage{
    margin-top:.5rem;
    font-size:.875rem;
    color:var(--kpr-text-light)
}

.kpr-dp-value{
    font-weight:600;
    color:var(--kpr-primary)
}

.kpr-tenor-slider{
    margin-top:.5rem
}

.kpr-tenor-slider input[type=range]{
    width:100%;
    height:8px;
    -webkit-appearance:none;
    background:var(--kpr-border);
    border-radius:4px;
    outline:none;
    margin:1rem 0
}

.kpr-tenor-slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:24px;
    height:24px;
    background:var(--kpr-primary);
    border-radius:50%;
    cursor:pointer;
    transition:all .2s ease
}

.kpr-tenor-slider input[type=range]::-webkit-slider-thumb:hover{
    transform:scale(1.1)
}

.kpr-tenor-labels{
    display:flex;
    justify-content:space-between;
    font-size:.75rem;
    color:var(--kpr-text-light)
}

.kpr-tenor-labels span:first-child,.kpr-tenor-labels span:last-child{
    font-weight:600
}

.kpr-form-actions{
    display:flex;
    gap:1rem;
    margin-top:1.5rem
}

.kpr-calculate-btn{
    flex:2;
    padding:1rem;
    background:var(--kpr-primary);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    transition:all .3s ease
}

.kpr-calculate-btn:hover{
    background:var(--kpr-primary-dark);
    transform:translateY(-2px)
}

.kpr-calculate-btn svg{
    width:20px;
    height:20px
}

.kpr-reset-btn{
    flex:1;
    padding:1rem;
    background:var(--kpr-secondary);
    color:var(--kpr-text);
    border:none;
    border-radius:8px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    transition:all .3s ease
}

.kpr-reset-btn:hover{
    background:#0e58bb;
    transform:translateY(-2px)
}

.kpr-reset-btn svg{
    width:20px;
    height:20px;
    color:var(--kpr-text-light)
}

.kpr-errors{
    margin-bottom:1.5rem
}

.kpr-error-alert{
    padding:.75rem 1rem;
    background:rgba(229,62,62,.1);
    border-left:4px solid var(--kpr-error);
    border-radius:4px;
    color:var(--kpr-error);
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.5rem
}

.kpr-error-alert svg{
    width:20px;
    height:20px
}

.kpr-results{
    margin-top:2rem;
    animation:fadeIn .5s ease
}

.kpr-result-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem
}

.kpr-result-header h2{
    font-size:1.25rem;
    color:var(--kpr-text)
}

.kpr-print-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--kpr-primary);
    padding:.5rem
}

.kpr-print-btn svg{
    width:20px;
    height:20px
}

.kpr-summary-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1rem;
    margin-bottom:1.5rem
}

.kpr-summary-card{
    background:var(--kpr-bg);
    border-radius:8px;
    padding:1rem;
    display:flex;
    align-items:center;
    gap:1rem
}

.kpr-summary-icon{
    width:48px;
    height:48px;
    background:rgba(0,86,179,.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center
}

.kpr-summary-icon svg{
    width:24px;
    height:24px;
    color:var(--kpr-primary)
}

.kpr-summary-content{
    display:flex;
    flex-direction:column
}

.kpr-summary-label{
    font-size:.875rem;
    color:var(--kpr-text-light)
}

.kpr-summary-value{
    font-size:1.125rem;
    font-weight:700;
    color:var(--kpr-text)
}

.kpr-payment-card{
    background:var(--kpr-bg);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:1.5rem
}

.kpr-payment-header{
    padding:1rem;
    background:var(--kpr-primary);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.kpr-payment-header h3{
    font-size:1rem;
    margin:0
}

.kpr-payment-amount{
    font-size:1.25rem;
    font-weight:700
}

.kpr-payment-details{
    padding:1rem
}

.kpr-payment-row{
    display:flex;
    justify-content:space-between;
    padding:.5rem 0;
    border-bottom:1px dashed var(--kpr-border)
}

.kpr-payment-row:last-child{
    border-bottom:none
}

.kpr-info-section{
    margin-top:2rem;
    animation:fadeIn .5s ease
}

.kpr-info-card{
    background:var(--kpr-bg);
    border-radius:8px;
    padding:1.5rem;
    margin-bottom:1.5rem
}

.kpr-info-card h3{
    font-size:1.125rem;
    color:var(--kpr-text);
    margin-top:0;
    margin-bottom:1rem
}

.kpr-info-list{
    list-style:none;
    padding:0;
    margin:0
}

.kpr-info-list li{
    padding:.5rem 0;
    display:flex;
    align-items:flex-start;
    gap:.75rem
}

.kpr-info-list li svg{
    width:20px;
    height:20px;
    color:var(--kpr-success);
    flex-shrink:0;
    margin-top:2px
}

.kpr-faq{
    background:var(--kpr-bg);
    border-radius:8px;
    padding:1.5rem
}

.kpr-faq h3{
    font-size:1.125rem;
    color:var(--kpr-text);
    margin-top:0;
    margin-bottom:1rem
}

.kpr-faq-item{
    margin-bottom:.5rem;
    border:1px solid var(--kpr-border);
    border-radius:8px;
    overflow:hidden
}

.kpr-faq-question{
    width:100%;
    padding:1rem;
    background:var(--kpr-card-bg);
    border:none;
    text-align:left;
    font-weight:600;
    color:var(--kpr-text);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem
}

.kpr-faq-question svg{
    width:20px;
    height:20px;
    transition:transform .3s ease
}

.kpr-faq-question[aria-expanded=true] svg{
    transform:rotate(180deg)
}

.kpr-faq-answer{
    padding:0 1rem;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease,padding .3s ease
}

.kpr-faq-answer p{
    margin:.5rem 0 1rem;
    color:var(--kpr-text-light)
}

.kpr-faq-item.active .kpr-faq-answer{
    padding:0 1rem 1rem;
    max-height:500px
}

.hidden{
    display:none
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}

@media print{
    .kpr-simulator-container{
        box-shadow:none;
        max-width:100%
    }
    .kpr-print-btn,.kpr-reset-btn,.kpr-tabs,.kpr-calculate-btn{
        display:none!important
    }
}

@media (max-width:768px){
    .kpr-simulator-container{
        margin:1rem;
        border-radius:0
    }
    .kpr-header{
        padding:1.5rem 1rem
    }
    .kpr-content-wrapper{
        padding:1.5rem
    }
    .kpr-summary-cards{
        grid-template-columns:1fr
    }
    .kpr-rate-options{
        flex-direction:column
    }
    .kpr-rate-type{
        max-width:100%
    }
}