body{
background:linear-gradient(180deg,#eef3ff 0%,#f7f9ff 100%);
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
}

.cic-container{

max-width:760px;
margin:60px auto;
padding:40px;

background:#ffffff;

border-radius:14px;

box-shadow:
0 20px 60px rgba(20,60,150,0.08),
0 5px 20px rgba(0,0,0,0.03);

}

/* header */

.cic-header{
text-align:center;
margin-bottom:40px;
}

.cic-title{
margin:0;
font-size:26px;
font-weight:700;
color:#1c2a4b;
}

.cic-header p{
margin-top:10px;
color:#6c7a96;
font-size:14px;
}


/* grid */

.cic-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}


/* fields */

.cic-field{
display:flex;
flex-direction:column;
}

.cic-field label{
font-size:13px;
font-weight:600;
margin-bottom:8px;
color:#2c3e50;
}

.cic-field input,
.cic-field select{

padding:14px;

height:48px;

border-radius:10px;

border:1px solid #dbe4ff;

background:#fbfcff;

font-size:14px;

transition:all .2s;

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

}

.cic-field input:focus,
.cic-field select:focus{

border-color:#4c84ff;

box-shadow:0 0 0 3px rgba(76,132,255,0.15);

outline:none;

}


/* button */

.cic-btn{

margin-top:32px;

width:100%;

padding:16px;

font-size:16px;

font-weight:600;

border:none;

border-radius:10px;

background:linear-gradient(135deg,#ff4f4f,#ff7373);

color:white;

cursor:pointer;

transition:all .25s;

box-shadow:0 10px 30px rgba(255,79,79,.35);

}

.cic-btn:hover{

transform:translateY(-3px);

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

}


/* loader */

.cic-loader{
display:none;
justify-content:center;
margin-top:20px;
}

.cic-spinner{

width:36px;
height:36px;

border:4px solid #e5edff;
border-top:4px solid #ff4f4f;

border-radius:50%;

animation:cicSpin .7s linear infinite;

}

@keyframes cicSpin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}


/* results */

.cic-results{

display:none;

margin-top:40px;

grid-template-columns:1fr;

gap:18px;

}

.cic-results.show{
display:grid;
}

.cic-result-card{

background:linear-gradient(180deg,#f7faff,#eef3ff);

padding:22px;

border-radius:12px;

box-shadow:0 6px 18px rgba(20,60,150,.08);

display:flex;
flex-direction:column;

}

.cic-result-card span{
font-size:13px;
color:#6a7ba6;
}

.cic-result-card strong{

margin-top:6px;

font-size:22px;

color:#1c2a4b;

}


/* chart */

#cicChart{

display:none;

margin-top:45px;

}

#cicChart.show{
display:block;
}


/* table */

.cic-table-wrapper{

display:none;

margin-top:35px;

border-radius:12px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.cic-table-wrapper.show{
display:block;
}

#cic-table{
width:100%;
border-collapse:collapse;
background:white;
}

#cic-table th{

background:#f1f4ff;

font-size:13px;

padding:12px;

text-align:center;

}

#cic-table td{

padding:11px;

border-bottom:1px solid #eef2ff;

text-align:center;

font-size:14px;

}


/* table animation */

#cic-table tbody tr{

opacity:0;
transform:translateY(10px);
transition:all .3s;

}

#cic-table tbody tr.row-show{

opacity:1;
transform:translateY(0);

}


/* desktop */

@media (min-width:700px){

.cic-grid{
grid-template-columns:1fr 1fr;
}

.cic-results{
grid-template-columns:1fr 1fr 1fr;
}

}


/* mobile */

@media (max-width:480px){

.cic-container{
padding:25px;
margin:30px 15px;
}

.cic-header h2{
font-size:22px;
}

.cic-btn{
font-size:15px;
padding:14px;
}

}