.wrapper{display:grid;grid-template-columns:20% 80%}
.wrap{padding: 25px 45px;display:flex;flex-direction:column;height:100vh;justify-content:space-between;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#form1 .list{display:block}
.contentMain{overflow-y:auto;height:100%;}
.cidGrid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
.cidCard{text-align:left;border:2px solid #e9eef3;border-radius:18px;background:#fff;padding:22px 22px 18px;cursor:pointer;position:relative;box-shadow:0 8px 18px rgba(16,24,40,.06);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.cidCard:hover{transform:translateY(-1px);border-color:#d7e3ee;box-shadow:0 12px 26px rgba(16,24,40,.10)}
.cidIcon{width:54px;height:54px;border-radius:15px;background:#f2f3f6;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cidCard.active .cidIcon{background:var(--primary)}
.cidIcon svg{stroke:#555}
.cidCard.active .cidIcon svg{stroke:#ffffff}
.cidTitle{margin:0 0 8px;font-size:20px;line-height:1.25;letter-spacing:.02em;color:#2a2a2c;font-weight:600}
.cidDesc{margin:0 0 16px;font-size:13px;line-height:1.6;color:#64748b;min-height:20px}
.cidMeta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;color:#94a3b8;font-size:12px}
.cidMetaItem{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#94A3B8;font-weight:400;font-size:12px}
.cidMetaItem svg{width:15px;height:15px;color:#94A3B8}
.cidMetaItem b{color:#94A3B8;font-weight:400;font-size:12px}
.cidMetaItem .dot{width:18px;height:18px;border-radius:999px;border:1px solid #e2e8f0;display:inline-block}
.cidCard.active{border-color:var(--primary);box-shadow:0 14px 30px rgb(243 152 0 / 18%)}
#form1 p.send_box{margin: 60px 0 10px;width: 100%;}
#form1 p.send_box a{display:block;background:#0f1425;padding:12px 0;border-radius:12px}
#form1 p.send_box a font{color: white;}

/* epaperstarts */
.epaperstarts{border: 1px solid #dedddd;border-radius: 8px;height: auto;}
.epaperstarts #sideNav h1{font-size: 18px;}
.epaperstarts .catBox{padding: 20px;border-bottom: 1px solid #dedddd;position: relative;display: flex;flex-direction: column;justify-content: flex-end;}
.epaperstarts .catBox .clockbox{position:absolute;right: 50px;display: flex;gap: 5px;align-items: center;}
.epaperstarts .catBox .clockbox svg{width: 22px;height: 22px;}
.epaperstarts .catBox .clockbox *{    color: #64748b;}
.epaperstarts #form1{position: relative;}
.epaperstarts #form1 .box{background:white;padding: 30px;}
#qBadge{background:#e2e8f0;color: #475569;display: inline-block;font-size: 14px;font-weight: 600;padding: 4px 15px 2px;border-radius: 50px;}
.epaperstarts #form1 .updown{width: 100%;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #dedddd;padding: 20px 20px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.epaperstarts #form1 .updown p{margin:0;width: auto;}
.epaperstarts #form1 .updown p a{padding: 12px 35px;}
.epaperstarts #form1 .updown p a.is-disabled{background:none;border: 1px solid #cbd5e1;}
.epaperstarts #form1 .updown p a.is-disabled svg{stroke:#475569}
.epaperstarts #form1 .updown p a.is-disabled font{color:#475569;font-weight: 500;}
.epaperstarts #form1 .updown p a svg{stroke: white;}
.epaperstarts #form1 .question p{ width: auto; margin: 15px 0 0;}
.epaperstarts #form1 .question p *{font-size: 22px;font-weight: 600;}
.ansList{ list-style:none; padding:0;  margin:16px 0 0;  width:100%;  display:flex;  flex-direction:column;  gap:16px;}

.ansItem{margin:0;padding:0}
.ansCard{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:18px 18px;border-radius:16px;border:2px solid #e6edf5;background:#fff;cursor:pointer;user-select:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .12s ease;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.ansCard:hover{transform:translateY(-1px);border-color:#cececd}
.ansRadio{position:absolute;opacity:0;pointer-events:none}
.ansBadge{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.02em;background:#fff;border:2px solid #c8d3df;color:#7a8a9a;flex:0 0 auto}
.ansText{font-size:16px;line-height:1.5;color:#334155;font-weight:500}
.ansCard.is-active{border-color:var(--primary);background:#fff9f0}
.ansCard.is-active .ansBadge{background:var(--primary);border-color:var(--primary);color:#fff}
.ansRadio:checked + .ansBadge{background:var(--primary);border-color:var(--primary);color:#fff}
.ansRadio:checked + .ansBadge + .ansText{color:#334155}

/* testreport */
.testreport .catBox{display:flex;flex-direction:column;align-items:center}
.testreport .catBox span{width:60px;display:flex;aspect-ratio:1/1;background:var(--primary);border-radius:50px;justify-content:center;align-items:center;margin-bottom:20px;margin-top:2%}
.testreport .catBox span svg{color:white}
.resultGrid{display:grid;gap:18px;margin:40px 10%;grid-template-columns:repeat(4,1fr)}
.resultCard{background:#fff;border:1px solid #e6edf5;border-radius:18px;padding:18px 16px;box-shadow:0 10px 24px rgba(16,24,40,.06);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.resultCard *{text-align:center}
.resultLabel{font-size:12px;color:#94a3b8;font-weight:700;letter-spacing:.08em;margin-bottom:10px}
.resultValue{font-weight:900;color:#1E293B;line-height:1.1}
.resultTitle{font-size:22px;font-weight:700}
.resultScore{font-size:44px;color:#00b3a4}
.resultCorrect{font-size:44px}
.resultRank{font-size:44px;color:#f59e0b}
.resultMeta{display:flex;gap:16px;align-items:center;justify-content:space-between;color:#64748b;font-size:13px;margin:0 10%}
.resultMeta .again a{background:#1e293b;display:inline-flex;align-items:center;gap:10px;color:white;padding:10px 20px;border-radius:10px}
.resultMeta .again a svg{color:white}
.resultMeta .metaItem{color:#64748B;display:flex;align-items:center;gap:5px}
.resultMeta .metaItem svg{color:#64748B;width:20px;height:20px}

@media (max-width: 1280px){
    .wrapper{grid-template-columns: 25% 75%;}
}
@media (max-width: 1024px){
    .cidGrid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 980px){
    .wrap, .contentMain{height:auto;}
    .wrapper{grid-template-columns: 1fr;}
}
@media (max-width: 680px){
    .epaperstarts #form1 .question p *{font-size: 19px;}
    .epaperstarts .catBox .clockbox{position:relative;right: unset;display: flex;justify-content: flex-end;}
    .wrap{padding: 45px 25px;}
}