/* This shared demo panel keeps its original data and native controls. */
html body[data-station="5"] #app #main#main .feedback-demo :is(p,th,caption){text-align:left!important}
html body[data-station="5"] #app #main#main .feedback-demo>.atp-select{grid-area:selector;min-width:0}
html body[data-station="5"] #app #main#main .feedback-demo>.atp-select>button{min-height:56px!important;font-size:16px!important;border-radius:8px!important}
/* Named rows keep short and long learning tables from leaving empty quadrants. */
html body[data-station="5"] #app #main#main .feedback-demo{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:"intro intro" "profile metrics" "selector metrics" "table table" "strength focus" "distribution distribution" "note note";align-items:start;padding:24px!important;border-radius:8px!important;gap:14px 20px!important;letter-spacing:0}
html body[data-station="5"] #app #main#main .feedback-demo>header{grid-area:intro;min-height:150px;padding:22px 170px 22px 22px!important;border-radius:8px!important}
html body[data-station="5"] #app #main#main .feedback-demo>header::after{width:155px;right:6px;top:15px;bottom:8px}
html body[data-station="5"] #app #main#main .feedback-demo>header h2{font-size:30px!important;line-height:1.2!important;color:#101b63!important}
html body[data-station="5"] #app #main#main .feedback-demo>header>small{font-size:13px!important;border-radius:8px}
html body[data-station="5"] #app #main#main .demo-symbol{width:42px;height:42px;flex:none;padding:9px;border-radius:50%;background:#deefff;color:#087ef1;vertical-align:middle;margin-right:10px;box-sizing:border-box}
html body[data-station="5"] #app #main#main .feedback-demo>label{grid-area:profile;margin:0!important;font-size:19px!important;display:flex;align-items:center;color:#101b63!important}
html body[data-station="5"] #app #main#main .feedback-demo>select{grid-area:selector;min-height:56px!important;font-size:16px!important;border-radius:8px!important}
html body[data-station="5"] #app #main#main .feedback-demo-metrics{grid-area:metrics;border:0!important;margin:0!important;padding:0!important;align-self:stretch}
html body[data-station="5"] #app #main#main .feedback-demo-metrics>span{display:flex;flex-direction:column;justify-content:center;position:relative;min-width:0;min-height:100px;padding:18px 10px 18px 64px!important;border-radius:8px!important;font-size:15px!important}
html body[data-station="5"] #app #main#main .feedback-demo-metrics .demo-symbol{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
html body[data-station="5"] #app #main#main#main .feedback-demo .feedback-demo-metrics>span>b{font-size:26px!important;line-height:1.2!important;margin-top:3px!important;display:block}
html body[data-station="5"] #app #main#main .feedback-demo-metrics>span:nth-child(2) .demo-symbol{background:#ccefe2;color:#07966e}
html body[data-station="5"] #app #main#main .feedback-demo-metrics>span:nth-child(3) .demo-symbol{background:#e8d9ff;color:#883de4}
html body[data-station="5"] #app #main#main .feedback-demo>.achievement-table-wrap{grid-area:table;min-width:0;margin:0!important;border-radius:8px!important}
html body[data-station="5"] #app #main#main .feedback-demo caption{font-size:21px!important;color:#101b63!important;padding:12px!important}
html body[data-station="5"] #app #main#main .feedback-demo :is(th,td){font-size:15px!important;line-height:1.45!important;padding:13px 12px!important}
html body[data-station="5"] #app #main#main .feedback-demo tbody th{font-weight:400!important;width:57%}
html body[data-station="5"] #app #main#main .feedback-demo :is(th,td):nth-child(2){background:#edf6ff!important;text-align:center}
html body[data-station="5"] #app #main#main .feedback-demo :is(th,td):nth-child(3){background:#edf9f3!important;text-align:center}
html body[data-station="5"] #app #main#main .feedback-demo :is(th,td):nth-child(4){background:#f7f0ff!important;text-align:center}
html body[data-station="5"] #app #main#main .feedback-demo>p:not(.feedback-demo-note){align-self:stretch;min-width:0;position:relative;padding:16px 16px 16px 72px!important;border-radius:8px!important;font-size:15px!important}
html body[data-station="5"] #app #main#main .feedback-demo>p:nth-of-type(1){grid-area:strength}
html body[data-station="5"] #app #main#main .feedback-demo>p:nth-of-type(2){grid-area:focus}
html body[data-station="5"] #app #main#main .feedback-demo>p>.demo-symbol{position:absolute;left:14px;top:14px}
html body[data-station="5"] #app #main#main .feedback-demo>details{grid-area:distribution;min-width:0;margin:0!important;border-radius:8px!important}
html body[data-station="5"] #app #main#main .feedback-demo>details>summary{font-size:20px!important;color:#101b63!important}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort{border:0!important;border-radius:0!important;padding:16px!important;margin:0!important}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort header{display:flex!important;justify-content:space-between;gap:20px;align-items:start}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort :is(h3,p){font-size:15px!important;line-height:1.5!important}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort-stats{display:flex;gap:8px;flex:none}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort-stats>span{padding:12px!important;border:1px solid #c9e0fc;border-radius:8px;font-size:14px!important}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort-chart{display:block;width:100%!important;max-width:none!important;height:auto!important;min-height:260px}
html body[data-station="5"] #app #main#main .feedback-demo .az-cohort footer{display:flex;gap:12px;padding:14px!important;background:#eaf8f2!important;border-radius:8px;font-size:15px!important}
html body[data-station="5"] #app #main#main .feedback-demo-note{grid-area:note;position:relative;padding:16px 16px 16px 70px!important;border-radius:8px!important;font-size:15px!important}
@media(max-width:1100px){html body[data-station="5"] #app #main#main .feedback-demo{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"intro" "profile" "selector" "metrics" "table" "strength" "focus" "distribution" "note"}}
@media(max-width:650px){html body[data-station="5"] #app #main#main .feedback-demo{padding:12px!important}html body[data-station="5"] #app #main#main .feedback-demo>header{padding:18px 90px 18px 18px!important;min-height:180px}html body[data-station="5"] #app #main#main .feedback-demo>header::after{display:block;width:80px}html body[data-station="5"] #app #main#main .feedback-demo>header h2{font-size:24px!important}html body[data-station="5"] #app #main#main .feedback-demo-metrics{grid-template-columns:1fr!important}html body[data-station="5"] #app #main#main .feedback-demo .az-cohort header{flex-direction:column}html body[data-station="5"] #app #main#main .feedback-demo .az-cohort-stats{flex-wrap:wrap}html body[data-station="5"] #app #main#main .feedback-demo :is(th,td){padding:8px!important;font-size:12px!important}html body[data-station="5"] #app #main#main .feedback-demo .az-cohort-chart{min-height:0}}