*{
    box-sizing:border-box;
}

.inflation-charts-page{
    overflow-x:hidden;
    background:#f8fafc;
    color:#102a43;
    font-family:Inter,"Segoe UI",sans-serif;
}

.inflation-charts-page main{
    margin-top:0!important;
}

.charts-layout{
    padding:1.5rem .75rem 2.5rem;
}

.charts-content{
    min-width:0;
}

.inflation-charts-page main h1{
    position:relative;
    overflow:hidden;
    margin:0 0 1.25rem;
    padding:clamp(1.7rem,4vw,3.5rem);
    color:#fff;
    font-size:clamp(2.1rem,4vw,3.25rem);
    line-height:1.08;
    font-weight:800;
    letter-spacing:0;
    background:linear-gradient(135deg,#102a43 0%,#146477 55%,#25a18e 100%);
    border-radius:24px;
    box-shadow:0 1.2rem 3rem rgba(16,42,67,.2);
}

.inflation-charts-page main h1:after{
    content:"CHART";
    position:absolute;
    right:2rem;
    top:1.05rem;
    color:rgba(255,255,255,.08);
    font-size:clamp(4rem,10vw,8rem);
    line-height:1;
    font-weight:900;
}

.charts-card,
.chart-tool-card,
.chart-result-card{
    color:#102a43;
    background:#fff;
    border:0;
    border-radius:20px;
    box-shadow:0 .65rem 1.9rem rgba(31,41,55,.08);
}

.charts-card{
    padding:clamp(1.25rem,3vw,2rem)!important;
}

.charts-intro{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    gap:1.25rem;
    align-items:stretch;
    margin-bottom:1.5rem;
}

.charts-intro-main,
.charts-intro-side{
    padding:1.25rem;
    border-radius:18px;
}

.charts-intro-main{
    background:linear-gradient(135deg,#fff 0%,#f0fbf8 100%);
    border:1px solid #bfe7df;
}

.charts-intro-side{
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.charts-eyebrow{
    color:#64748b;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.charts-intro .lead{
    color:#334155;
    font-size:1.1rem;
    line-height:1.7;
}

.charts-checklist{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
    margin:1rem 0 0;
    padding:0;
    list-style:none;
}

.charts-checklist li,
.charts-steps li{
    position:relative;
    padding:.8rem .9rem .8rem 2.35rem;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
}

.charts-checklist li:before,
.charts-steps li:before{
    content:"";
    position:absolute;
    left:.9rem;
    top:1.05rem;
    width:.6rem;
    height:.6rem;
    background:#25a18e;
    border-radius:999px;
}

.charts-steps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.75rem;
    margin:1rem 0 1.5rem;
    padding:0;
    list-style:none;
    counter-reset:step;
}

.charts-steps li{
    padding-left:1rem;
}

.charts-steps li:before{
    content:counter(step);
    counter-increment:step;
    display:flex;
    align-items:center;
    justify-content:center;
    top:.85rem;
    width:1.35rem;
    height:1.35rem;
    color:#fff;
    font-size:.75rem;
    font-weight:800;
}

.chart-tool-card{
    overflow:hidden;
    margin-top:1.5rem;
}

.chart-tool-card .card-header{
    color:#fff!important;
    background:#102a43!important;
    border:0;
}

.chart-tool-card .card-body{
    padding:1.25rem;
}

.inflation-charts-page main .form-control,
.inflation-charts-page main .form-select{
    min-height:46px;
    border-color:#cbd5e1;
    border-radius:12px;
}

.inflation-charts-page main .form-control:focus,
.inflation-charts-page main .form-select:focus{
    border-color:#25a18e;
    box-shadow:0 0 0 .2rem rgba(37,161,142,.18);
}

.inflation-charts-page main .btn-primary{
    color:#fff;
    background:#126b70;
    border-color:#126b70;
    border-radius:999px;
    font-weight:800;
    box-shadow:0 .55rem 1.25rem rgba(18,107,112,.18);
}

.inflation-charts-page main .btn-primary:hover{
    background:#0f5559;
    border-color:#0f5559;
}

.chart-result-card{
    padding:1.25rem;
    margin-top:1.75rem;
}

.chart-result-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.chart-result-title{
    margin:0;
    color:#102a43;
    font-size:clamp(1.35rem,2.2vw,2rem);
    font-weight:800;
}

.chart-result-title small{
    display:block;
    margin-top:.35rem;
    color:#64748b;
    font-size:1rem;
    font-weight:600;
}

.chart-stats{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-bottom:1rem;
}

.chart-stat-pill{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.55rem .8rem;
    color:#102a43;
    background:#f0fbf8;
    border:1px solid #bfe7df;
    border-radius:999px;
    font-weight:700;
}

#chartContainer{
    min-height:520px;
}

.inflation-charts-page main table.table{
    color:#102a43;
    border:1px solid #e2e8f0!important;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 .65rem 1.9rem rgba(31,41,55,.08);
}

.inflation-charts-page main table.table thead th,
.inflation-charts-page main table.table thead td{
    color:#fff;
    background:#102a43!important;
    border-color:#102a43!important;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:.78rem;
}

.inflation-charts-page main table.table tbody td,
.inflation-charts-page main table.table tbody th{
    border-color:#e2e8f0!important;
    vertical-align:middle;
}

.inflation-charts-page main table.table-striped>tbody>tr:nth-of-type(odd)>*{
    background:#f8fafc!important;
}

.inflation-charts-page main table.table tbody tr:hover>*{
    background:#f0fbf8!important;
}

.inflation-charts-page main a{
    color:#126b70;
}

.inflation-charts-page main a:hover{
    color:#0f5559;
}

.inflation-charts-page .adsense-laterale{
    position:sticky;
    top:1rem;
}

@media(max-width:1199px){
    .charts-layout{
        padding-inline:1rem;
    }

    .charts-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767px){
    .charts-layout{
        padding:.75rem .75rem 1.75rem;
    }

    .inflation-charts-page main h1,
    .charts-card,
    .chart-tool-card,
    .chart-result-card{
        border-radius:18px;
    }

    .charts-intro,
    .charts-checklist,
    .charts-steps{
        grid-template-columns:1fr;
    }

    #chartContainer{
        min-height:360px;
    }
}