#personalRoutesCollection { --route-accent:#6245cb; --route-tint:#f2edff; }
#personalRoutesCollection[data-route-style="ocean"] { --route-accent:#08708b; --route-tint:#e7f7fc; }
#personalRoutesCollection[data-route-style="forest"] { --route-accent:#277342; --route-tint:#edf8ee; }
#personalRoutesCollection[data-route-style="sunset"] { --route-accent:#ad4b20; --route-tint:#fff2e9; }
#routeInsights { padding:24px; margin-bottom:24px; border-radius:22px; background:var(--route-tint); border:1px solid var(--route-accent); }
.insights-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; flex-wrap:wrap; }
.insights-heading h3 { margin:0 0 8px; font-size:clamp(22px,3vw,30px); }
.insights-heading p { margin:0 0 18px; }
.insights-heading label { display:grid; gap:6px; font-weight:600; }
.insights-heading select { padding:10px; border-radius:12px; font:inherit; background:white; color:#26213b; border:1px solid var(--route-accent); }
.insights-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.insights-totals > div { display:grid; gap:8px; padding:20px; background:#fff; border-radius:16px; color:#29243c; }
.insights-totals strong { font-size:32px; color:var(--route-accent); }
.insights-coverage { margin:14px 0 0; font-size:14px; }
#personalRoutesCollection .route-list { gap:20px; }
#personalRoutesCollection .route-list-card { border-top:5px solid var(--route-accent); padding:22px; gap:12px; border-radius:20px; box-shadow:0 6px 18px #30234709; }
#personalRoutesCollection .route-list-card strong { font-size:20px; line-height:1.4; }
#personalRoutesCollection .route-level { background:var(--route-tint); color:var(--route-accent); }
#personalRoutesCollection .route-card-actions { position:static; padding:12px 6px; flex-wrap:wrap; }
.route-card-insights { display:grid; width:100%; gap:10px; margin-top:12px; padding-top:18px; border-top:1px solid #e6e1ed; }
.insights-progress-label { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.insights-progress-label b { font-size:26px; color:var(--route-accent); }
.insights-progress-label > span,.insights-module { font-size:14px; }
.insights-track { display:block; width:100%; height:9px; border-radius:6px; overflow:hidden; background:#e8e5ee; }
.insights-track > span { display:block; height:100%; background:var(--route-accent); border-radius:6px; }
.insights-module-title { margin-top:8px; font-weight:700; }
.insights-module { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
.insights-module .insights-track { grid-column:1/-1; height:6px; }
html[data-kuali-reading-colors]:not([data-kuali-reading-colors="default"]) #personalRoutesCollection { --route-accent:var(--reading-primary,#155e75); --route-tint:var(--reading-tint,#f5f8fa); }
@media(max-width:600px) { .insights-totals { grid-template-columns:1fr; } .insights-totals > div { grid-template-columns:60px 1fr; align-items:center; } #routeInsights { padding:18px; } }