*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --primary:#2e7d32;
    --dark:#1b5e20;
    --blue:#2196f3;
    --green:#4caf50;
    --orange:#fb8c00;
    --red:#e53935;
    --bg:#f4f6f9;
    --white:#fff;
    --text:#222;
    --shadow:0 10px 25px rgba(0,0,0,.08);
    --radius:18px;
}


body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
}



#loadingScreen{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:15px;
    z-index:9999;
}


.loader{
    width:45px;
    height:45px;
    border:5px solid #ddd;
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin 1s linear infinite;
}


@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}



.topbar{
    background:linear-gradient(135deg,var(--primary),var(--dark));
    color:#fff;
    padding:25px 40px;
    box-shadow:var(--shadow);
}


.logoArea h1{
    font-size:30px;
}


.logoArea p{
    margin-top:5px;
    opacity:.9;
}



.container{
    width:min(1400px,95%);
    margin:30px auto;
}



.summaryGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}



.summaryCard{
    background:#fff;
    padding:25px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border-left:6px solid;
}


.summaryCard.blue{
    border-color:var(--blue);
}


.summaryCard.green{
    border-color:var(--green);
}


.summaryCard.red{
    border-color:var(--red);
}


.summaryCard.orange{
    border-color:var(--orange);
}



.cardTitle{
    color:#777;
    font-size:14px;
}


.cardValue{
    font-size:38px;
    font-weight:700;
    margin-top:10px;
}



.progressSection,
.contentSection{
    background:#fff;
    padding:28px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:30px;
}



.sectionHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}


.sectionHeader h2{
    font-size:22px;
}


.sectionHeader span{
    color:#777;
    font-size:14px;
}



.progressChart{
    display:flex;
    align-items:flex-end;
    height:280px;
    padding-bottom:10px;
}



.progressColumn{
    width:56px;
    min-width:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:.2s;
    box-sizing:border-box;
}



.progressColumn:hover{
    transform:translateY(-8px);
}



.chartValue{
    font-size:11px;
    font-weight:600;
    margin-bottom:8px;
    white-space:nowrap;
}



.chartBar{
    width:30px;
    height:190px;
    background:#eee;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
}



.chartFill{
    width:100%;
    transition:.8s;
}



.progress-green{
    background:#4caf50;
}


.progress-yellow{
    background:#fbc02d;
}


.progress-orange{
    background:#fb8c00;
}


.progress-red{
    background:#e53935;
}



.chartLabel{
    margin-top:10px;
    font-size:11px;
    font-weight:600;
    text-align:center;
}



.chartOuter{
    display:flex;
    align-items:flex-end;
}


.chartAxis{
    width:34px;
    min-width:34px;
    height:190px;
    margin-bottom:34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
    padding-right:6px;
    font-size:10px;
    color:#888;
}


.chartScrollX{
    overflow-x:auto;
    flex:1;
}


.legendOuter{
    display:flex;
    margin-top:20px;
}


.legendScrollX{
    overflow-x:auto;
    flex:1;
}


.legendTable{
    border-collapse:collapse;
    font-size:12px;
}


.legendTable th,
.legendTable td{
    border:1px solid #e0e0e0;
    width:56px;
    box-sizing:border-box;
    padding:6px 4px;
    text-align:center;
    white-space:nowrap;
}


.legendTable th{
    background:#fafafa;
}


.legendLabelTable{
    flex-shrink:0;
}


.legendLabelTable th,
.legendLabelTable td{
    width:80px;
    font-weight:600;
    background:#fafafa;
}



.blockGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:18px;
}



.blockCard{
    padding:20px;
    border-radius:15px;
    color:#fff;
    text-align:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:.2s;
}



.blockCard:hover{
    transform:translateY(-5px);
}



.blockCard.success{
    background:#4caf50;
}



.blockCard.failed{
    background:#e53935;
}



.blockCard strong{
    display:block;
    font-size:22px;
}



.blockCard span{
    font-size:12px;
}



.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}



.modal.show{
    display:flex;
}



.modalContent{
    background:#fff;
    width:min(600px,90%);
    border-radius:18px;
    padding:25px;
    box-shadow:var(--shadow);
}



.modalHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}



.modalHeader button{
    border:none;
    background:none;
    font-size:28px;
    cursor:pointer;
}



.detailGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
}



.detailItem{
    background:#f5f5f5;
    padding:15px;
    border-radius:12px;
}



.detailItem label{
    font-size:12px;
    color:#777;
}



.detailItem p{
    margin-top:5px;
    font-weight:600;
}



.historySection{
    margin-top:25px;
}



#historyContainer{
    background:#f5f5f5;
    padding:15px;
    border-radius:12px;
    margin-top:10px;
}



.planListGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:20px;
}


.planListWrap h3{
    font-size:16px;
    margin-bottom:10px;
}


.chipList{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}


.chip{
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}


.chip.chipGreen{
    background:#e8f5e9;
    color:#2e7d32;
}


.chip.chipRed{
    background:#ffebee;
    color:#e53935;
}



#toast{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#333;
    color:#fff;
    padding:15px 20px;
    border-radius:10px;
    display:none;
}



footer{
    text-align:center;
    padding:25px;
    color:#777;
    font-size:13px;
}



@media(max-width:600px){

    .topbar{
        padding:20px;
    }


    .logoArea h1{
        font-size:24px;
    }


    .progressChart{
        height:240px;
    }


    .chartBar{
        height:150px;
    }


    .chartAxis{
        height:150px;
    }

}