/* Frontend-only styles (strictly scoped) */
.csf-front-block{ border:1px solid #E5E7EB; border-radius:16px; padding:14px; margin:18px 0; background:#fff; font-family:inherit; color:#111827; }
.csf-front-head{ display:flex; align-items:center; justify-content:space-between; }
.csf-front-title{ font-weight:600; font-size:24px; }
.csf-front-sub{ color:#6B7280; font-size:12px; }
.csf-front-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.csf-front-item{ display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid #E5E7EB; border-radius:12px; text-decoration:none; color:#111827; background:#fff; }
.csf-front-item:hover{ box-shadow:0 1px 4px rgba(0,0,0,.05); }
.csf-front-item .left .title{ font-weight:500; }
.csf-front-item .left .sub{ color:#6B7280; font-size:12px; }
.csf-front-item .right{ display:flex; align-items:center; gap:8px; }
.csf-front-item .right .lab{ font-size:11px; color:#6B7280; }
.csf-bar{ flex:1; height:8px; background:#F3F4F6; border-radius:999px; overflow:hidden; min-width:120px; }
.csf-bar.sm{ width:120px; }
.csf-bar-fill{ height:100%; background: linear-gradient(90deg, #FDE68A, #FACC15); border-radius:999px; }