/* CSATWORK RegLearn v2 — locked design: deep green / white / gold accent */
#crl-root{
	--g900:#0B3D2E; --g700:#0F5A43; --g500:#17795A; --g100:#E8F3EE; --g50:#F4FAF7;
	--gold:#C9A227; --ink:#1D2A25; --sub:#5B6E66; --bad:#B3462D; --bad-bg:#FBEFEA;
	max-width:680px; margin:0 auto; padding:clamp(10px,3vw,24px);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color:var(--ink); position:relative; box-sizing:border-box;
}
#crl-root *{box-sizing:border-box; overflow-wrap:break-word;}

/* header */
#crl-root .crl-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
#crl-root .crl-brand{font-weight:800; font-size:clamp(15px,4vw,18px); color:var(--g900); letter-spacing:.2px;}
#crl-root .crl-brand span{color:var(--g500);}
#crl-root .crl-head-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#crl-root .crl-chip{background:var(--g100); color:var(--g900); border-radius:999px; padding:5px 12px; font-size:clamp(11px,3vw,13px); font-weight:700; white-space:nowrap;}
#crl-root .crl-chip-rank{background:var(--g900); color:#fff;}
#crl-root .crl-ring{position:relative; width:40px; height:40px; flex:none;}
#crl-root .crl-ring svg{width:40px; height:40px; transform:rotate(-90deg);}
#crl-root .crl-ring circle{fill:none; stroke-width:3.4;}
#crl-root .crl-ring .bg{stroke:var(--g100);}
#crl-root .crl-ring .fg{stroke:var(--gold); stroke-linecap:round; transition:stroke-dasharray .5s ease;}
#crl-root .crl-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--g900);}

/* cards */
#crl-root .crl-card{background:#fff; border:1px solid var(--g100); border-radius:16px; padding:clamp(16px,4vw,26px); box-shadow:0 2px 14px rgba(11,61,46,.06); margin-bottom:14px;}
#crl-root .crl-card h2{margin:6px 0 8px; font-size:clamp(19px,5vw,25px); line-height:1.25; color:var(--g900);}
#crl-root .crl-card h3{margin:0 0 8px; font-size:clamp(16px,4.4vw,19px); color:var(--g900);}
#crl-root .crl-kicker{font-size:clamp(10px,2.8vw,12px); font-weight:800; letter-spacing:1.4px; color:var(--g500);}
#crl-root .crl-sub{color:var(--sub); font-size:clamp(13px,3.6vw,15px); line-height:1.55; margin:4px 0 10px;}
#crl-root .crl-fine{color:var(--sub); font-size:clamp(11px,3vw,12.5px); line-height:1.5; margin:8px 0 0;}
#crl-root .crl-err{color:var(--bad); font-size:13px; min-height:18px; margin:6px 0 0;}
#crl-root .crl-link{color:var(--g700); font-weight:700; text-decoration:underline;}

/* banner */
#crl-root .crl-banner{border-radius:14px; padding:12px 16px; font-size:clamp(13px,3.6vw,15px); margin-bottom:12px; line-height:1.5;}
#crl-root .crl-banner-gold{background:linear-gradient(100deg,#FFF9E8,#FDF3D2); border:1px solid #EAD48A; color:#6B551A;}

/* form */
#crl-root .crl-form{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
#crl-root .crl-form input{width:100%; padding:13px 14px; border:1.6px solid var(--g100); border-radius:12px; font-size:16px; color:var(--ink); background:var(--g50); outline:none;}
#crl-root .crl-form input:focus{border-color:var(--g500); background:#fff;}

/* buttons */
#crl-root .crl-btn{display:inline-block; width:100%; text-align:center; background:var(--g700); color:#fff; border:none; border-radius:12px; padding:13px 18px; font-size:clamp(14px,3.8vw,16px); font-weight:800; cursor:pointer; margin-top:10px; text-decoration:none; transition:background .15s, transform .1s;}
#crl-root .crl-btn:active{transform:scale(.985);}
#crl-root .crl-btn:hover{background:var(--g900);}
#crl-root .crl-btn:disabled{opacity:.55; cursor:default;}
#crl-root .crl-btn-ghost{background:#fff; color:var(--g700); border:1.6px solid var(--g500);}
#crl-root .crl-btn-ghost:hover{background:var(--g50); color:var(--g900);}
#crl-root .crl-btn-gold{background:var(--gold); color:#3A2E07;}
#crl-root .crl-btn-gold:hover{background:#B8931F;}
#crl-root .crl-btnrow{display:flex; gap:10px; flex-wrap:wrap;}
#crl-root .crl-btnrow .crl-btn{flex:1; min-width:130px;}
#crl-root .shake{animation:crl-shake .35s;}
@keyframes crl-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* modules */
#crl-root .crl-progress-card .crl-bar{height:10px; background:var(--g100); border-radius:999px; overflow:hidden; margin:8px 0 6px;}
#crl-root .crl-bar-fill{height:100%; background:linear-gradient(90deg,var(--g500),var(--g700)); border-radius:999px; transition:width .5s ease;}
#crl-root .crl-modules{display:flex; flex-direction:column; gap:10px;}
#crl-root .crl-mod{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--g100); border-radius:14px; padding:13px 15px; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
#crl-root .crl-mod:hover{border-color:var(--g500); box-shadow:0 2px 10px rgba(11,61,46,.08);}
#crl-root .crl-mod.done{background:var(--g50);}
#crl-root .crl-mod-no{flex:none; width:36px; height:36px; border-radius:10px; background:var(--g900); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;}
#crl-root .crl-mod.done .crl-mod-no{background:var(--g500);}
#crl-root .crl-mod-body{flex:1; min-width:0;}
#crl-root .crl-mod-body strong{display:block; font-size:clamp(13.5px,3.8vw,15.5px); color:var(--g900); line-height:1.35;}
#crl-root .crl-mod-body span{font-size:clamp(11px,3vw,12.5px); color:var(--sub);}
#crl-root .crl-mod-go{color:var(--g500); font-weight:800;}
#crl-root .crl-wall-btn{margin-top:14px;}

/* activity */
#crl-root .crl-acthead{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
#crl-root .crl-tag{background:var(--g900); color:#fff; font-size:clamp(10px,2.8vw,11.5px); font-weight:800; letter-spacing:1.1px; border-radius:6px; padding:4px 9px;}
#crl-root .crl-tag-review{background:var(--gold); color:#3A2E07;}
#crl-root .crl-count{color:var(--sub); font-size:clamp(11px,3vw,12.5px); font-weight:700; margin:0;}
#crl-root .crl-scenario{background:var(--g50); border-left:4px solid var(--g500); border-radius:10px; padding:13px 15px; font-size:clamp(13px,3.7vw,15px); line-height:1.65; white-space:pre-wrap; margin:10px 0;}
#crl-root .crl-provision{background:var(--g50); border-left:4px solid var(--gold); border-radius:10px; padding:13px 15px; font-size:clamp(13px,3.7vw,15px); line-height:1.65; font-style:italic; margin:10px 0; color:#2C3A34;}
#crl-root .crl-q{font-weight:800; font-size:clamp(14.5px,4vw,17px); color:var(--g900); margin:12px 0 8px; line-height:1.4;}
#crl-root .crl-opts{display:flex; flex-direction:column; gap:9px;}
#crl-root .crl-opt{text-align:left; background:#fff; border:1.6px solid var(--g100); border-radius:12px; padding:12px 14px; font-size:clamp(13px,3.7vw,15px); line-height:1.5; color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s;}
#crl-root .crl-opt:hover{border-color:var(--g500);}
#crl-root .crl-opt.sel{border-color:var(--g700); background:var(--g100); font-weight:700; color:var(--g900);}
#crl-root .crl-free{width:100%; min-height:74px; margin-top:12px; border:1.6px solid var(--g100); border-radius:12px; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--g50); resize:vertical; outline:none;}
#crl-root .crl-free:focus{border-color:var(--g500); background:#fff;}
#crl-root .crl-src{margin-top:14px; font-size:clamp(10.5px,2.9vw,12px); color:var(--sub); line-height:1.5;}

/* reveal */
#crl-root .crl-verdict{border-radius:12px; padding:13px 15px; font-weight:800; font-size:clamp(14px,3.9vw,16px); line-height:1.45;}
#crl-root .crl-verdict.ok{background:var(--g100); color:var(--g900);}
#crl-root .crl-verdict.bad{background:var(--bad-bg); color:var(--bad);}
#crl-root .crl-bonus{display:inline-block; background:var(--g50); border:1px solid var(--g100); color:var(--g700); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800; margin:8px 6px 0 0;}
#crl-root .crl-bonus.combo{background:#FFF7E0; border-color:#EAD48A; color:#7A611A;}
#crl-root .crl-lapse{background:var(--g50); border-radius:12px; padding:12px 14px; margin-top:10px;}
#crl-root .crl-lapse strong{color:var(--g900); font-size:clamp(13.5px,3.7vw,15px);}
#crl-root .crl-lapse p{margin:5px 0 0; font-size:clamp(12.5px,3.5vw,14px); line-height:1.6; color:#33443D;}
#crl-root .crl-expl{background:var(--g50); border-radius:12px; padding:12px 14px; margin-top:10px; font-size:clamp(12.5px,3.5vw,14px); line-height:1.6; color:#33443D;}
#crl-root .crl-summary{margin-top:12px; font-size:clamp(12.5px,3.5vw,14px); font-weight:700; color:var(--g700); line-height:1.55;}

/* poll */
#crl-root .crl-poll{margin-top:16px; border-top:1.5px dashed var(--g100); padding-top:14px;}
#crl-root .crl-poll h4{margin:0 0 9px; font-size:clamp(13.5px,3.7vw,15px); color:var(--g900);}
#crl-root .crl-poll-opts{display:flex; flex-direction:column; gap:8px;}
#crl-root .crl-poll-opt{background:#fff; border:1.6px solid var(--g100); border-radius:10px; padding:10px 13px; font-size:clamp(12.5px,3.4vw,14px); text-align:left; cursor:pointer;}
#crl-root .crl-poll-opt:hover{border-color:var(--g500);}
#crl-root .crl-poll-row{position:relative; border:1.6px solid var(--g100); border-radius:10px; padding:10px 62px 10px 13px; font-size:clamp(12px,3.3vw,13.5px); overflow:hidden; min-height:40px; display:flex; align-items:center;}
#crl-root .crl-poll-row .lbl{position:relative; z-index:2; line-height:1.4;}
#crl-root .crl-poll-row .fill{position:absolute; left:0; top:0; bottom:0; background:var(--g100); z-index:1; transition:width .6s ease;}
#crl-root .crl-poll-row .pct{position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:2; font-weight:800; color:var(--g700);}
#crl-root .crl-poll-row.mine{border-color:var(--g700);}
#crl-root .crl-poll-row.mine .lbl{font-weight:800; color:var(--g900);}

/* onemore */
#crl-root .crl-onemore{margin-top:18px; border-top:1.5px dashed var(--g100); padding-top:14px;}

/* tour */
#crl-root .crl-tour{text-align:center;}
#crl-root .crl-tour-icon{font-size:46px; margin-top:6px;}
#crl-root .crl-dots{display:flex; justify-content:center; gap:7px; margin:14px 0 4px;}
#crl-root .crl-dots span{width:8px; height:8px; border-radius:50%; background:var(--g100); display:inline-block;}
#crl-root .crl-dots span.on{background:var(--g700);}

/* flash */
#crl-root .crl-flash-stage{margin-top:8px;}
#crl-root .crl-flash{perspective:1100px; cursor:pointer; margin:8px 0 4px;}
#crl-root .crl-flash-inner{position:relative; width:100%; min-height:190px; transition:transform .5s; transform-style:preserve-3d;}
#crl-root .crl-flash.flipped .crl-flash-inner{transform:rotateY(180deg);}
#crl-root .crl-flash-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; font-size:clamp(14.5px,4vw,17px); line-height:1.5;}
#crl-root .crl-flash-face.front{background:var(--g900); color:#fff; font-weight:800;}
#crl-root .crl-flash-face.back{background:var(--g50); border:1.6px solid var(--g100); color:var(--g900); transform:rotateY(180deg); font-weight:600;}

/* rank up overlay */
#crl-root .crl-rankup{position:fixed; inset:0; background:rgba(11,61,46,.92); z-index:9999; display:flex; align-items:center; justify-content:center; animation:crl-fade .3s;}
#crl-root .crl-rankup .inner{text-align:center; color:#fff; padding:20px;}
#crl-root .crl-rankup .big{font-size:56px;}
#crl-root .crl-rankup h2{color:#fff; margin:8px 0 2px; font-size:26px;}
#crl-root .crl-rankup p{color:var(--g100); margin:0;}
#crl-root .crl-rankup .rank{font-size:clamp(26px,7vw,36px); font-weight:800; color:var(--gold); margin-top:6px;}
@keyframes crl-fade{from{opacity:0}to{opacity:1}}

/* certificate */
#crl-root .crl-cert-canvas{width:100%; height:auto; border-radius:12px; border:1px solid var(--g100); margin:10px 0 4px;}

/* wall */
#crl-root .crl-wall{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
#crl-root .crl-wall-row{display:flex; align-items:center; gap:10px; border:1.6px solid var(--g100); border-radius:12px; padding:10px 13px; font-size:clamp(12.5px,3.5vw,14px);}
#crl-root .crl-wall-row.me{border-color:var(--g700); background:var(--g50);}
#crl-root .crl-wall-row .rank{font-weight:800; color:var(--g500); flex:none; width:36px;}
#crl-root .crl-wall-row .name{flex:1; min-width:0; font-weight:700; color:var(--g900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#crl-root .crl-wall-row .tier{flex:none; font-size:10.5px; font-weight:800; letter-spacing:.6px; border-radius:6px; padding:3px 8px; text-transform:uppercase;}
#crl-root .crl-wall-row .tier.distinction{background:#FFF3CE; color:#7A611A; border:1px solid #EAD48A;}
#crl-root .crl-wall-row .tier.merit{background:var(--g100); color:var(--g700);}
#crl-root .crl-wall-row .tier.completion{background:var(--g50); color:var(--sub); border:1px solid var(--g100);}
#crl-root .crl-wall-row .acc{flex:none; font-weight:800; color:var(--g900);}

/* confetti */
#crl-root .crl-confetti{position:absolute; left:0; top:0; pointer-events:none; z-index:999;}

@media (min-width:560px){
	#crl-root .crl-btn{width:auto; min-width:180px;}
	#crl-root .crl-btnrow .crl-btn{width:auto;}
}

/* ===== 2.1.0 — Learn layer ===== */
#crl-root .crl-chip-streak{background:#FFF3CE; color:#7A611A; border:1px solid #EAD48A;}
#crl-root .crl-banner-nudge{background:var(--g50); border:1px solid var(--g100); color:var(--g900);}
#crl-root .crl-pills{display:flex; gap:6px; margin-top:5px; flex-wrap:wrap;}
#crl-root .crl-pill{font-size:10.5px; font-weight:800; letter-spacing:.4px; border-radius:6px; padding:3px 8px; background:var(--g50); color:var(--sub); border:1px solid var(--g100); white-space:nowrap;}
#crl-root .crl-pill.donep{background:var(--g100); color:var(--g700); border-color:var(--g500);}
#crl-root .crl-pill.good{background:var(--g100); color:var(--g700); border-color:var(--g500);}
#crl-root .crl-pill.mid{background:#FFF9E8; color:#7A611A; border-color:#EAD48A;}
#crl-root .crl-pill.low{background:var(--bad-bg); color:var(--bad); border-color:#E8C4B6;}

/* journey strip */
#crl-root .crl-journey{display:flex; gap:6px; margin:0 0 12px;}
#crl-root .crl-jstep{flex:1; text-align:center; padding:8px 4px; border-radius:10px; background:#fff; border:1.6px solid var(--g100); font-size:clamp(10px,2.9vw,12px); font-weight:800; color:var(--sub);}
#crl-root .crl-jstep .ico{display:block; font-size:16px; margin-bottom:2px;}
#crl-root .crl-jstep.on{border-color:var(--g700); color:var(--g900); background:var(--g100);}
#crl-root .crl-jstep.done{border-color:var(--g500); color:var(--g500); background:var(--g50);}
#crl-root .crl-lcount{text-align:center; color:var(--sub); font-size:12px; font-weight:700; margin:0 0 8px;}

/* concept card */
#crl-root .crl-lcard{border-radius:18px; background:linear-gradient(160deg,var(--g900),var(--g700)); color:#fff; padding:clamp(18px,5vw,28px); box-shadow:0 4px 18px rgba(11,61,46,.18);}
#crl-root .crl-ltag{font-size:10.5px; font-weight:800; letter-spacing:1.4px; color:var(--gold); margin-bottom:10px;}
#crl-root .crl-lcard h3{color:#fff; font-size:clamp(17px,4.8vw,21px); margin:0 0 14px; line-height:1.3;}
#crl-root .crl-beat{margin-bottom:13px;}
#crl-root .crl-blabel{font-size:10.5px; font-weight:800; letter-spacing:1.1px; color:#9FD4BE; margin-bottom:3px;}
#crl-root .crl-beat p{margin:0; font-size:clamp(13px,3.7vw,15px); line-height:1.6; color:#F0FAF5;}
#crl-root .crl-beat.trip .crl-blabel{color:var(--gold);}
#crl-root .crl-beat.trip p{color:#FDF3D2;}
#crl-root .crl-beat.hook{background:rgba(201,162,39,.14); border:1px solid rgba(201,162,39,.4); border-radius:10px; padding:9px 12px;}
#crl-root .crl-beat.hook .crl-blabel{color:var(--gold);}
#crl-root .crl-beat.linkb{background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.25); border-radius:10px; padding:9px 12px;}
#crl-root .crl-beat.linkb p{color:#CDE4D8; font-size:clamp(12px,3.3vw,13.5px);}
#crl-root .crl-lprov{margin-top:12px; padding-top:12px; font-size:11px; color:#8FBFA9; border-top:1px solid rgba(255,255,255,.14);}
#crl-root .crl-ldots{display:flex; justify-content:center; gap:7px; margin:14px 0 2px;}
#crl-root .crl-ldots span{width:8px; height:8px; border-radius:50%; background:#CDE4D8; display:inline-block;}
#crl-root .crl-ldots span.on{background:var(--g700); transform:scale(1.2);}

/* worked example */
#crl-root .crl-story{background:var(--g50); border:1.6px solid var(--g100); border-radius:16px; padding:clamp(15px,4vw,22px); margin-bottom:14px;}
#crl-root .crl-stag{display:inline-block; background:var(--gold); color:#3A2E07; font-size:10.5px; font-weight:800; letter-spacing:1px; border-radius:6px; padding:4px 10px; margin-bottom:10px;}
#crl-root .crl-story h3{font-size:clamp(15.5px,4.3vw,18px);}
#crl-root .crl-story p{font-size:clamp(13px,3.7vw,15px); line-height:1.7; color:#2C3A34; margin:0 0 10px;}
#crl-root .crl-story .num{font-weight:800; color:var(--g700);}
#crl-root .crl-calc{background:#fff; border:1.6px solid var(--g100); border-radius:12px; padding:12px 15px; margin:12px 0;}
#crl-root .crl-crow{display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:clamp(12.5px,3.5vw,14px); border-bottom:1px dashed var(--g100);}
#crl-root .crl-crow:last-child{border-bottom:none;}
#crl-root .crl-crow span:first-child{color:#2C3A34;}
#crl-root .crl-crow span:last-child{font-weight:700; color:var(--g700); text-align:right;}

/* matrix */
#crl-root .crl-matrix{border:1.6px solid var(--g100); border-radius:12px; overflow:hidden; margin:12px 0; font-size:clamp(11px,3vw,13px);}
#crl-root .crl-mrow{display:flex;}
#crl-root .crl-mrow:nth-child(even){background:var(--g50);}
#crl-root .crl-mhead{background:var(--g900) !important; color:#fff; font-weight:800;}
#crl-root .crl-mcell{flex:1; padding:8px 9px; line-height:1.45; border-right:1px solid var(--g100); min-width:0;}
#crl-root .crl-mcell:last-child{border-right:none;}
#crl-root .crl-mcell.lead{font-weight:800; color:var(--g900); flex:0.9;}
#crl-root .crl-mhead .crl-mcell{border-right-color:rgba(255,255,255,.18);}

/* ===== 2.2.0 — hook, summary, tip, visuals ===== */
#crl-root .crl-hookcard{background:linear-gradient(160deg,#123F30,var(--g700));}
#crl-root .crl-hookcard h3{font-size:clamp(18px,5vw,22px); line-height:1.35;}
#crl-root .crl-hookans .crl-btn{margin-top:14px;}
#crl-root .crl-remember{margin:8px 0 4px; padding-left:20px;}
#crl-root .crl-remember li{font-size:clamp(13px,3.7vw,14.5px); line-height:1.6; color:#2C3A34; margin-bottom:7px;}
#crl-root .crl-remember li::marker{color:var(--g500); font-weight:800;}
#crl-root .crl-tip{background:#FFF9E8; border:1.6px solid #EAD48A; border-radius:12px; padding:13px 15px; margin-top:14px;}
#crl-root .crl-tiplabel{font-size:10.5px; font-weight:800; letter-spacing:1px; color:#7A611A; margin-bottom:5px;}
#crl-root .crl-tip p{margin:0; font-size:clamp(12.5px,3.5vw,14px); line-height:1.65; color:#5C4A14;}

/* ladder visual */
#crl-root .crl-ladder{display:flex; flex-direction:column; gap:8px; margin:10px 0 18px;}
#crl-root .crl-rung{display:flex; justify-content:space-between; align-items:center; gap:10px; border-radius:12px; padding:12px 15px; color:#fff; font-size:clamp(12.5px,3.5vw,14px);}
#crl-root .crl-rung .lbl{font-weight:800;}
#crl-root .crl-rung .val{font-weight:800; white-space:nowrap;}
#crl-root .crl-rung.r0{background:var(--g900); width:100%;}
#crl-root .crl-rung.r1{background:var(--g700); width:86%;}
#crl-root .crl-rung.r2{background:var(--g500); width:72%;}

/* roadmap visual */
#crl-root .crl-roadmap{display:flex; flex-direction:column; gap:0; margin:10px 0 18px;}
#crl-root .crl-rstep{display:flex; align-items:flex-start; gap:11px; padding:7px 0; position:relative;}
#crl-root .crl-rstep .dot{flex:none; width:26px; height:26px; border-radius:50%; background:var(--g700); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; z-index:1;}
#crl-root .crl-rstep:not(:last-child)::before{content:''; position:absolute; left:12px; top:32px; bottom:-8px; width:2px; background:var(--g100);}
#crl-root .crl-rstep .txt{font-size:clamp(12.5px,3.5vw,14px); line-height:1.55; color:#2C3A34; padding-top:3px;}