*{

    box-sizing:border-box;

}



:root{

    --v2-blue:#1769e0;

    --v2-green:#18a66a;

    --v2-text:#10203b;

    --v2-muted:#697689;

    --v2-border:#dfe5ec;

    --v2-bg:#f5f7fa;

}



html,body{

    margin:0;

    padding:0;

    width:100%;

    min-height:100%;

    background:var(--v2-bg);

    color:var(--v2-text);

    font-family:Inter,Arial,sans-serif;

}



.v2-page{

    width:100%;

    max-width:1180px;

    margin:auto;

    padding:18px;

}



.v2-header{

    background:#fff;

    border:1px solid var(--v2-border);

    border-radius:18px;

    padding:18px 22px;

    box-shadow:0 8px 25px rgba(16,32,59,.06);

}



.v2-brand{

    font-size:25px;

    font-weight:900;

}



.v2-subtitle{

    margin-top:3px;

    font-size:12px;

    color:var(--v2-muted);

    font-weight:700;

}



.v2-nav{

    display:flex;

    gap:7px;

    margin-top:12px;

    overflow-x:auto;

}



.v2-nav a{

    flex:1 1 0;

    min-width:115px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:10px;

    background:#eef2f7;

    color:#455267;

    font-size:12px;

    font-weight:850;

}



.v2-nav a.active{

    background:var(--v2-blue);

    color:#fff;

}



.v2-card{

    margin-top:12px;

    background:#fff;

    border:1px solid var(--v2-border);

    border-radius:18px;

    box-shadow:0 8px 25px rgba(16,32,59,.06);

    overflow:hidden;

}



.v2-card-head{

    padding:17px 20px 12px;

}



.v2-title{

    font-size:22px;

    font-weight:900;

}



.v2-description{

    margin-top:3px;

    font-size:11px;

    color:var(--v2-muted);

}



.v2-country-row{

    display:grid;

    grid-template-columns:minmax(0,1fr) 250px;

    gap:10px;

    padding:12px 20px;

    background:#fafbfd;

    border-top:1px solid #edf0f4;

    border-bottom:1px solid #edf0f4;

}



.v2-country{

    position:relative;

}



.v2-country-input{

    width:100%;

    height:46px;

    padding:0 12px 0 48px;

    border:1px solid var(--v2-border);

    border-radius:10px;

    background:#fff;

    font-size:13px;

    outline:none;

}



.v2-flag{

    position:absolute;

    left:13px;

    top:15px;

    width:25px;

    height:17px;

    object-fit:cover;

    border-radius:2px;

}



.v2-country-list{

    position:absolute;

    z-index:50;

    top:52px;

    left:0;

    right:0;

    max-height:310px;

    overflow:auto;

    display:none;

    background:#fff;

    border:1px solid var(--v2-border);

    border-radius:11px;

    box-shadow:0 16px 35px rgba(0,0,0,.16);

}



.v2-country-list.open{

    display:block;

}



.v2-country-option{

    width:100%;

    display:flex;

    align-items:center;

    gap:9px;

    padding:9px 12px;

    border:0;

    background:#fff;

    text-align:left;

    cursor:pointer;

    font-size:12px;

}



.v2-country-option:hover{

    background:#f2f6fb;

}



.v2-country-option img{

    width:25px;

    height:17px;

    object-fit:cover;

    border-radius:2px;

}



.v2-currency{

    width:100%;

    height:46px;

    padding:0 10px;

    border:1px solid var(--v2-border);

    border-radius:10px;

    background:#fff;

    font-size:12px;

}



.v2-content{

    padding:18px 20px 20px;

}



.v2-fields{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

}



.v2-field{

    min-width:0;

}



.v2-label{

    display:flex;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;

    font-size:12px;

    font-weight:850;

}



.v2-label-value{

    color:var(--v2-blue);

}



.v2-input-row{

    display:grid;

    grid-template-columns:minmax(0,1fr) 78px;

    gap:6px;

}



.v2-input{

    width:100%;

    height:44px;

    padding:0 11px;

    border:1px solid var(--v2-border);

    border-radius:9px;

    font-size:14px;

    outline:none;

}



.v2-unit{

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--v2-border);

    border-radius:9px;

    background:#f8fafc;

    color:#657184;

    font-size:10px;

    font-weight:850;

}



.v2-range{

    width:100%;

    height:20px;

    accent-color:var(--v2-blue);

    margin-top:3px;

}



.v2-results{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:16px;

}



.v2-result{

    min-width:0;

    padding:17px;

    border-radius:13px;

    border:1px solid #dfe8fa;

    background:#f3f7ff;

}



.v2-result:nth-child(2){

    background:#effaf5;

    border-color:#d9efe3;

}



.v2-result:nth-child(3){

    background:#f3f7ff;

}



.v2-result-title{

    font-size:11px;

    font-weight:800;

    color:#657184;

}



.v2-result-value{

    margin-top:5px;

    font-size:24px;

    font-weight:900;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



.v2-chart-card{

    margin-top:14px;

    padding:16px;

    border:1px solid var(--v2-border);

    border-radius:13px;

    background:#fff;

}



.v2-chart-title{

    font-size:15px;

    font-weight:900;

}



.v2-legend{

    display:flex;

    gap:16px;

    margin-top:6px;

    font-size:10px;

    color:#667386;

}



.v2-legend-item{

    display:flex;

    align-items:center;

    gap:5px;

}



.v2-dot{

    width:8px;

    height:8px;

    border-radius:50%;

}



.v2-blue{

    background:var(--v2-blue);

}



.v2-green{

    background:var(--v2-green);

}



.v2-chart-scroll{

    width:100%;

    overflow-x:auto;

}



.v2-chart{

    min-width:720px;

    height:270px;

    margin-top:8px;

    padding:8px 8px 25px;

    display:flex;

    align-items:flex-end;

    gap:7px;

    border-bottom:1px solid #e3e8ee;

}



.v2-bar-group{

    position:relative;

    flex:0 0 15px;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-direction:column;

}



.v2-bar{

    width:15px;

    display:flex;

    flex-direction:column-reverse;

    overflow:hidden;

    border-radius:5px 5px 0 0;

}



.v2-invest{

    background:var(--v2-blue);

}



.v2-gain{

    background:var(--v2-green);

}



.v2-year{

    position:absolute;

    bottom:-20px;

    font-size:8px;

    color:#768194;

}



.v2-calculate{

    width:100%;

    height:48px;

    margin-top:14px;

    border:0;

    border-radius:11px;

    background:var(--v2-blue);

    color:#fff;

    font-size:14px;

    font-weight:900;

    cursor:pointer;

}



.v2-note{

    margin-top:8px;

    color:#7b8696;

    font-size:9px;

    line-height:1.5;

}



@media(max-width:760px){



    .v2-page{

        padding:5px;

    }



    .v2-header,

    .v2-card{

        border-radius:13px;

    }



    .v2-brand{

        font-size:18px;

    }



    .v2-nav a{

        min-width:90px;

        height:38px;

        font-size:10px;

    }



    .v2-country-row{

        grid-template-columns:1fr;

        padding:9px;

    }



    .v2-content{

        padding:11px;

    }



    .v2-fields{

        grid-template-columns:1fr;

        gap:9px;

    }



    .v2-results{

        grid-template-columns:1fr;

        gap:7px;

    }



    .v2-result{

        padding:11px 13px;

    }



    .v2-result-value{

        font-size:21px;

    }



    .v2-chart-card{

        padding:10px;

    }



    .v2-chart{

        min-width:620px;

        height:210px;

    }



    .v2-calculate{

        height:45px;

    }

}




/* =================================================

   WWAP FINAL MOBILE / HEADER OVERRIDE

   ================================================= */



.v2-header{

    text-align:center;

}



.v2-brand{

    width:100%;

    text-align:center;

}



.v2-subtitle{

    width:100%;

    text-align:center;

    font-size:10px;

    font-weight:700;

    letter-spacing:.1px;

}



.v2-nav{

    justify-content:center;

}



.v2-nav a{

    text-align:center;

}



/* -----------------------------------------------

   MOBILE ONE-SCREEN MODE

   ----------------------------------------------- */



@media(max-width:600px){



    html,body{

        width:100%;

        min-height:100%;

        overflow-x:hidden;

    }



    .v2-page{

        width:100%;

        max-width:none;

        padding:3px;

    }



    .v2-header{

        padding:9px 7px 7px;

        border-radius:11px;

    }



    .v2-brand{

        font-size:16px;

        line-height:1.1;

    }



    .v2-subtitle{

        margin-top:2px;

        font-size:9px;

    }



    .v2-nav{

        gap:4px;

        margin-top:7px;

    }



    .v2-nav a{

        min-width:0;

        height:31px;

        padding:0 5px;

        border-radius:7px;

        font-size:8px;

        white-space:nowrap;

    }



    .v2-card{

        margin-top:5px;

        border-radius:11px;

    }



    .v2-card-head{

        padding:8px 9px 6px;

        text-align:center;

    }



    .v2-title{

        font-size:15px;

        line-height:1.1;

    }



    .v2-description{

        margin-top:2px;

        font-size:8px;

    }



    .v2-country-row{

        grid-template-columns:minmax(0,1fr) 112px;

        gap:5px;

        padding:6px;

    }



    .v2-country-input,

    .v2-currency{

        height:34px;

        border-radius:7px;

        font-size:9px;

    }



    .v2-country-input{

        padding-left:36px;

    }



    .v2-flag{

        left:9px;

        top:10px;

        width:21px;

        height:14px;

    }



    .v2-country-list{

        top:39px;

        max-height:220px;

        border-radius:8px;

    }



    .v2-country-option{

        padding:7px 9px;

        font-size:9px;

    }



    .v2-country-option img{

        width:21px;

        height:14px;

    }



    .v2-content{

        padding:7px;

    }



    /* Three compact input columns */

    .v2-fields{

        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:5px;

    }



    .v2-label{

        margin-bottom:3px;

        font-size:8px;

        line-height:1.15;

    }



    .v2-input-row{

        grid-template-columns:minmax(0,1fr) 38px;

        gap:3px;

    }



    .v2-input{

        height:31px;

        padding:0 5px;

        border-radius:6px;

        font-size:10px;

    }



    .v2-unit{

        border-radius:6px;

        font-size:7px;

        overflow:hidden;

        white-space:nowrap;

    }



    .v2-range{

        height:13px;

        margin-top:0;

    }



    /* Step-up / SWP / STP extra field:

       keep compact but allow it to fit */

    .v2-fields:has(#extra-input){

        grid-template-columns:repeat(2,minmax(0,1fr));

    }



    .v2-fields:has(#extra-input) .v2-field:last-child{

        grid-column:1 / -1;

    }



    .v2-results{

        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:4px;

        margin-top:6px;

    }



    .v2-result{

        padding:7px 5px;

        border-radius:7px;

        text-align:center;

    }



    .v2-result-title{

        font-size:7px;

        line-height:1.1;

    }



    .v2-result-value{

        margin-top:2px;

        font-size:11px;

        line-height:1.1;

    }



    .v2-chart-card{

        margin-top:6px;

        padding:6px;

        border-radius:8px;

    }



    .v2-chart-title{

        font-size:10px;

    }



    .v2-legend{

        gap:8px;

        margin-top:3px;

        font-size:7px;

    }



    .v2-dot{

        width:6px;

        height:6px;

    }



    .v2-chart-scroll{

        overflow-x:auto;

    }



    .v2-chart{

        min-width:520px;

        height:125px;

        margin-top:3px;

        padding:3px 3px 17px;

        gap:4px;

    }



    .v2-bar-group{

        flex-basis:9px;

    }



    .v2-bar{

        width:9px;

        border-radius:3px 3px 0 0;

    }



    .v2-year{

        bottom:-14px;

        font-size:6px;

    }



    .v2-calculate{

        height:34px;

        margin-top:6px;

        border-radius:7px;

        font-size:10px;

    }



    .v2-note{

        margin-top:4px;

        font-size:7px;

        line-height:1.25;

        text-align:center;

    }

}



/* Very small phones */

@media(max-width:380px){



    .v2-brand{

        font-size:15px;

    }



    .v2-subtitle{

        font-size:8px;

    }



    .v2-nav a{

        font-size:7px;

        height:29px;

    }



    .v2-country-row{

        grid-template-columns:minmax(0,1fr) 102px;

    }



    .v2-result-value{

        font-size:10px;

    }



    .v2-chart{

        min-width:480px;

        height:115px;

    }

}






/* =================================================

   WWAP 193 COUNTRY + CURRENCY FINAL UI

   ================================================= */



.v2-country-row{

    position:relative;

}



.v2-country{

    position:relative;

}



.v2-country-input{

    cursor:pointer;

}



.v2-country-list{

    z-index:9999;

}



.v2-currency{

    cursor:pointer;

}



/* Currency dropdown */

.v2-currency option{

    font-size:12px;

}



/* Mobile */

@media(max-width:600px){



    .v2-country-list{

        left:0;

        right:0;

        max-height:240px;

    }



    .v2-country-option{

        min-height:34px;

    }



    .v2-currency{

        min-width:0;

    }

}







/* =================================================

   WWAP EASY COUNTRY SEARCH

   ================================================= */



.v2-country-input::placeholder{

    color:#8b96a6;

    opacity:1;

}



.v2-country-input:focus{

    border-color:#1769e0;

    box-shadow:0 0 0 3px rgba(23,105,224,.08);

}



.v2-country-option{

    cursor:pointer;

}



.v2-country-option span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}



@media(max-width:600px){



    .v2-country-input{

        font-size:10px;

    }



    .v2-country-list{

        max-height:250px;

    }



    .v2-country-option{

        min-height:36px;

        padding:8px 9px;

    }

}





/* CORE-CALCULATOR-CATEGORY-UI */



.v2-category-card{

    margin-top:12px;

}



.v2-category-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:12px;

    padding:12px 20px 20px;

}



.v2-category-item{

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    text-decoration:none;

    background:#fff;

    border:1px solid var(--v2-border);

    border-radius:14px;

    padding:18px 10px 14px;

    color:var(--v2-text);

}



.v2-category-item:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(16,32,59,.10);

    border-color:#cbd6e3;

}



.v2-category-icon{

    font-size:15px;

    font-weight:900;

    color:var(--v2-blue);

    margin-bottom:10px;

}



.v2-category-name{

    font-size:14px;

    font-weight:900;

    line-height:1.25;

}



.v2-category-text{

    min-height:30px;

    margin-top:6px;

    color:var(--v2-muted);

    font-size:10px;

    font-weight:650;

    line-height:1.45;

}



.v2-category-button{

    margin-top:11px;

    width:100%;

    padding:8px 5px;

    border-radius:8px;

    background:var(--v2-blue);

    color:#fff;

    font-size:10px;

    font-weight:850;

}



@media (max-width:900px){

    .v2-category-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}



@media (max-width:600px){

    .v2-category-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        padding:10px 12px 14px;

        gap:9px;

    }

}





/* =================================================

   WWAP SWP CHART FINAL

   ================================================= */



.v2-swp-bar-group{

    flex:0 0 28px;

}



.v2-swp-bar-pair{

    height:235px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:3px;

}



.v2-swp-column{

    width:10px;

    min-height:2px;

    border-radius:4px 4px 0 0;

}



.v2-swp-remaining{

    background:var(--v2-blue);

}



.v2-swp-withdrawal{

    background:var(--v2-green);

}



@media(max-width:600px){



    .v2-swp-bar-group{

        flex-basis:18px;

    }



    .v2-swp-bar-pair{

        height:105px;

        gap:2px;

    }



    .v2-swp-column{

        width:6px;

        border-radius:2px 2px 0 0;

    }



}






/* =================================================

   SWP CHART VISIBILITY FIX

   ================================================= */



.v2-chart .v2-swp-bar-group{

    height:100%;

    flex:0 0 28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-end;

    position:relative;

}



.v2-chart .v2-swp-bar-pair{

    width:100%;

    height:235px;

    display:flex;

    flex-direction:row;

    align-items:flex-end;

    justify-content:center;

    gap:3px;

}



.v2-chart .v2-swp-column{

    display:block;

    width:10px;

    min-height:2px;

    flex:0 0 10px;

    border-radius:4px 4px 0 0;

}



.v2-chart .v2-swp-remaining{

    background:var(--v2-blue);

}



.v2-chart .v2-swp-withdrawal{

    background:var(--v2-green);

}



@media(max-width:600px){



    .v2-chart .v2-swp-bar-group{

        flex-basis:18px;

    }



    .v2-chart .v2-swp-bar-pair{

        height:105px;

        gap:2px;

    }



    .v2-chart .v2-swp-column{

        width:6px;

        flex-basis:6px;

    }



}




/* =================================================

   SWP FINAL BAR RENDER FIX

   ================================================= */



.v2-chart .v2-swp-bar-group{

    height:250px !important;

    min-height:250px !important;

    flex:0 0 28px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:flex-end !important;

}



.v2-chart .v2-swp-bar-pair{

    width:24px !important;

    height:235px !important;

    min-height:235px !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:flex-end !important;

    justify-content:center !important;

    gap:3px !important;

}



.v2-chart .v2-swp-column{

    display:block !important;

    width:10px !important;

    min-width:10px !important;

    max-width:10px !important;

    min-height:2px !important;

    flex:0 0 auto !important;

    border-radius:4px 4px 0 0 !important;

}



.v2-chart .v2-swp-remaining{

    background:#1769e0 !important;

}



.v2-chart .v2-swp-withdrawal{

    background:#20a66a !important;

}