.admin-shell { max-width: 1500px; margin: 0 auto; padding: 24px; }
.admin-shell a { text-decoration: none; }
.login-card { max-width: 460px; margin: 8vh auto; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric { position: relative; overflow: hidden; padding: 20px; border-radius: 18px; color: white; background: linear-gradient(135deg, #5b65d8, #8d5fd3); box-shadow: 0 10px 28px #4f46a52b; }
.metric::after { content: ""; position: absolute; width: 90px; height: 90px; right: -25px; top: -28px; border-radius: 50%; background: rgba(255,255,255,.12); }
.metric:nth-child(2) { background: linear-gradient(135deg, #168f78, #39b89c); }
.metric:nth-child(3) { background: linear-gradient(135deg, #d77730, #efaa49); }
.metric:nth-child(4) { background: linear-gradient(135deg, #c34c76, #e77a9a); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-symbol { font-size: 25px; opacity: .9; }
.metric strong { display: block; font-size: 32px; margin-top: 7px; }
.metric small { display: block; margin-top: 4px; opacity: .82; }
.visual-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 18px; margin-bottom: 18px; }
.chart-card { min-height: 340px; margin-bottom: 0; }
.chart-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.chart-heading h2 { margin: 4px 0 18px; }
.eyebrow { color: #7f75b7; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.chart-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: white; font-size: 23px; background: linear-gradient(135deg, #625fce, #8b72d7); box-shadow: 0 7px 17px rgba(98,95,206,.25); }
.donut-layout { min-height: 245px; display: grid; grid-template-columns: minmax(190px, .9fr) 1fr; align-items: center; gap: 24px; }
.donut-chart { --complete: 0; width: 205px; aspect-ratio: 1; margin: auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#625fce calc(var(--complete) * 1%), #45b99b 0 72%, #e1a655 0 85%, #d86f91 0 94%, #d9d7e5 0); box-shadow: 0 12px 30px rgba(82,75,139,.16); position: relative; }
.donut-chart::before { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: #fffcf8; box-shadow: inset 0 0 0 1px #ece8f2; }
.donut-center { position: relative; z-index: 1; text-align: center; display: grid; }
.donut-center strong { font-size: 34px; color: #494276; }
.donut-center span { color: #847d91; font-size: 12px; }
.chart-legend { display: grid; gap: 11px; }
.legend-row { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 8px; color: #6f6877; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-row strong { color: #4a4550; }
.bar-chart { min-height: 250px; display: flex; align-items: stretch; justify-content: space-around; gap: 10px; padding: 12px 5px 0; border-bottom: 1px solid #e8e4ed; background: repeating-linear-gradient(to top, transparent 0 49px, #efecf3 50px); }
.stage-column { min-width: 54px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.stage-value { font-size: 12px; font-weight: 800; color: #615a6d; }
.stage-bar-track { width: min(44px, 72%); height: 185px; border-radius: 12px 12px 5px 5px; background: #eceaf1; overflow: hidden; display: flex; align-items: flex-end; }
.stage-bar { width: 100%; min-height: 3px; border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, #796ed8, #48b89c); transition: height .5s ease; }
.stage-label { min-height: 35px; color: #777080; font-size: 11px; text-align: center; line-height: 1.3; }
.admin-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.teacher-metric { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 14px 0; border-bottom: 1px solid #e9e7f2; }
.teacher-metric .bar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: #ebe9f5; overflow: hidden; }
.teacher-metric .bar i { display: block; height: 100%; background: linear-gradient(90deg, #635fd4, #46bda1); border-radius: inherit; }
.teacher-metric small { color: #847d8c; }
.action-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tenant-link { display: inline-flex; align-items: center; gap: 4px; color: #625fce !important; font-weight: 700; text-decoration: none !important; border-bottom: 0 !important; }
.tenant-link:hover { color: #4037a7 !important; transform: translateX(2px); }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .admin-grid, .visual-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .admin-shell { padding: 12px; } .metric-grid { grid-template-columns: 1fr; } .donut-layout { grid-template-columns: 1fr; } .bar-chart { overflow-x: auto; justify-content: flex-start; } .stage-column { flex: 0 0 62px; } }