.percentage-card{
    width:100%;
    max-width:650px;
    background:white;
    padding:35px;
    border-radius:22px;
    box-shadow:0 14px 38px rgba(0,0,0,.12);
}

.percentage-card h1{
    text-align:center;
    color:#10b981;
    margin-bottom:12px;
}

.percentage-card .subtitle{
    text-align:center;
    color:#64748b;
    margin-bottom:25px;
}

.mode-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:25px;
}

.mode-btn{
    border:none;
    border-radius:12px;
    padding:12px;
    cursor:pointer;
    font-weight:700;
    background:#e5e7eb;
    color:#111827;
    transition:.3s;
}

.mode-btn.active{
    background:#10b981;
    color:white;
}

.calc-section{
    display:none;
}

.calc-section.active{
    display:block;
}

.input-group{
    margin-bottom:18px;
}

.input-group label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
}

.input-group input{
    width:100%;
    padding:14px 16px;
    font-size:16px;
    border-radius:12px;
    border:1px solid #d1d5db;
    outline:none;
}

.input-group input:focus{
    border-color:#10b981;
    box-shadow:0 0 0 4px rgba(16,185,129,.18);
}

.percent-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:14px;
    background:#10b981;
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.percent-btn:hover{
    background:#059669;
    transform:translateY(-2px);
}

.reset-btn{
    margin-top:10px;
    background:#475569;
}

.reset-btn:hover{
    background:#334155;
}

.percent-result{
    margin-top:25px;
    padding:20px;
    border-radius:16px;
    background:#f0fdf4;
    color:#064e3b;
    font-weight:700;
    line-height:1.8;
    display:none;
    text-align:center;
    font-size:18px;
}

body.dark-mode .percentage-card{
    background:#1f2937;
    color:#e5e7eb;
}

body.dark-mode .percentage-card .subtitle{
    color:#cbd5e1;
}

body.dark-mode .input-group input{
    background:#111827;
    color:#e5e7eb;
    border-color:#374151;
}

body.dark-mode .mode-btn{
    background:#374151;
    color:#e5e7eb;
}

body.dark-mode .mode-btn.active{
    background:#10b981;
    color:white;
}

body.dark-mode .percent-result{
    background:#064e3b;
    color:#ecfdf5;
}

@media(max-width:650px){
    .mode-buttons{
        grid-template-columns:1fr;
    }

    .percentage-card{
        padding:25px;
    }
}
/* ======================================
   PERCENTAGE RESULT UPGRADE
   ====================================== */

.percentage-result-summary{
    display:grid;
    gap:9px;

    padding:14px;

    border:
        1px solid
        var(--tool-result-border);

    border-radius:12px;

    background:
        var(--tool-result-bg);

    color:
        var(--tool-text);

    text-align:center;
}

.percentage-statement{
    color:
        var(--tool-muted);

    font-size:.9rem;
    font-weight:700;
    line-height:1.5;
}

.percentage-main-value{
    color:#10b981;

    font-size:1.25rem;
    font-weight:800;
    line-height:1.35;

    font-variant-numeric:
        tabular-nums;

    overflow-wrap:anywhere;
}

.percentage-number-words{
    display:block;
    padding:8px 10px;

    border:
        1px solid
        var(--tool-words-border);

    border-radius:8px;

    background:
        var(--tool-words-bg);

    color:
        var(--tool-words-text);

    font-size:.78rem;
    font-weight:600;
    line-height:1.45;

    overflow-wrap:anywhere;
}

.percentage-result-note{
    color:
        var(--tool-muted);

    font-size:.78rem;
    font-weight:600;
}

.percentage-message{
    padding:12px;

    border:1px solid #fecaca;
    border-radius:10px;

    background:#fef2f2;
    color:#991b1b;

    font-weight:700;
    text-align:center;
}

body.dark-mode
.percentage-message{
    background:#3f1d1d;
    border-color:#7f1d1d;
    color:#fecaca;
}

.percentage-negative
.percentage-main-value{
    color:#ef4444;
}

.percentage-neutral
.percentage-main-value{
    color:#f59e0b;
}