.live-overview { display: grid; gap: 16px; min-width: 0; }
.kpi-panel { display: grid; gap: 16px; padding: 22px; border: 1px solid #c8a9e3; border-radius: 16px; background: var(--surface-lilac); }
.kpi-panel .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.kpi-panel .section-heading h3 { margin: 3px 0 0; font: 600 25px/1.1 var(--font-display); }
.kpi-panel .section-heading > p { max-width: 420px; margin: 0; color: var(--ink-soft); font-size: 12px; }
.kpi-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpi-score-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kpi-score-card.outstanding { border-color: #77c99a; background: color-mix(in srgb, var(--surface) 87%, #48c783); }
.kpi-score-card.intervention { border-color: #e599a3; background: color-mix(in srgb, var(--surface) 88%, #e65b69); }
.kpi-score-card > span { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.kpi-score-card > strong { display: block; margin: 5px 0; color: var(--purple-dark); font: 600 36px/1 var(--font-display); }
.kpi-score-card > small { display: block; font-size: 11px; font-weight: 800; }
.kpi-score-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.kpi-score-parts span { padding: 5px 7px; border-radius: 6px; background: var(--surface-lilac); color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.kpi-resident-table { min-width: 880px; }
.kpi-resident-table th, .kpi-resident-table td { font-size: 11px; }
.kpi-footnote { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.kpi-report-control { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.kpi-report-control input { accent-color: var(--purple); }
.kpi-resident-table select { min-width: 90px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; }
.student-neighborhood { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-lilac); }
.student-neighborhood h2 { margin: 3px 0; font: 600 22px/1.1 var(--font-display); }
.student-neighborhood p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.student-neighborhood label { display: grid; gap: 5px; min-width: 210px; color: var(--ink); font-size: 11px; font-weight: 800; }
.student-neighborhood select { min-height: 39px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); font: inherit; }
.student-neighborhood [role="status"] { flex-basis: 100%; }
.student-kpi-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.student-kpi-summary > div { display: grid; gap: 5px; min-height: 92px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.student-kpi-summary span { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.student-kpi-summary strong { color: var(--purple-dark); font: 600 29px/1 var(--font-display); }
.student-kpi-summary .has-overdue { border-color: #e6a0a5; background: rgba(217, 54, 67, .1); }
.student-kpi-summary .has-overdue strong { color: #a12d37; }
.student-kpi-summary .has-stars { border-color: #e5bf61; background: color-mix(in srgb, var(--surface) 88%, #ffd979); }
.student-kpi-summary .has-stars strong { color: #9b6500; }
.student-kpi-list-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.student-kpi-list-heading h4 { margin: 0; font-size: 15px; }
.student-kpi-list-heading small { color: var(--ink-soft); font-weight: 700; }
.student-kpi-assignments { display: grid; gap: 9px; }
.student-kpi-assignment { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.student-kpi-assignment.done { border-color: #9cd9b8; background: color-mix(in srgb, var(--surface) 88%, #48c783); }
.student-kpi-assignment.star { border-color: #e5bf61; background: color-mix(in srgb, var(--surface) 88%, #ffd979); }
.student-kpi-assignment.overdue { border-color: #e6a0a5; background: color-mix(in srgb, var(--surface) 85%, #e65b69); }
.student-kpi-module strong, .student-kpi-module small { display: block; }
.student-kpi-module strong { font-size: 13px; }
.student-kpi-module small { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }
.student-kpi-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 7px; color: var(--purple-dark); background: var(--surface-lilac); font-size: 11px; font-weight: 900; }
.student-kpi-assignment.done .student-kpi-status { color: #246647; background: rgba(57, 181, 111, .14); }
.student-kpi-assignment.star .student-kpi-status { color: #815300; background: rgba(255, 205, 76, .22); }
.student-kpi-assignment.overdue .student-kpi-status { color: #a12d37; background: rgba(217, 54, 67, .14); }
.student-kpi-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 9px; color: var(--ink-soft); background: var(--surface); }
.kpi-course-schedule { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kpi-course-schedule > summary { padding: 12px 15px; color: var(--purple-dark); cursor: pointer; font-size: 12px; font-weight: 900; }
.kpi-schedule-table { display: grid; padding: 0 15px 10px; }
.kpi-schedule-table > div { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(170px, 1fr) minmax(105px, .6fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 11px; }
.kpi-schedule-table strong { color: var(--ink); }
.kpi-schedule-table span { color: var(--ink-soft); }
.live-overview[hidden] { display: none !important; }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid #c8a9e3; border-radius: 12px; background: var(--surface-lilac); }
.demo-banner strong { color: var(--purple-dark); font-size: 15px; }
.demo-banner p { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.demo-banner .btn { flex: 0 0 auto; }
.demo-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-view-tabs button { min-height: 38px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.demo-view-tabs button[aria-pressed="true"] { border-color: var(--purple); color: white; background: var(--purple); }
#demoViewBody { display: grid; gap: 18px; }
.demo-view-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.demo-view-heading h2 { margin: 2px 0 4px; font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.demo-view-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.demo-view-heading label { display: grid; gap: 5px; min-width: 180px; font-size: 11px; font-weight: 800; }
.demo-view-heading select { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font: inherit; }
.demo-next { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.demo-next.overdue { border-color: #e6a0a5; background: linear-gradient(135deg, var(--surface), rgba(220, 66, 77, .12)); }
.demo-next h3 { margin: 5px 0; font: 600 21px/1.2 var(--font-display); }
.demo-next p { margin: 0 0 15px; color: var(--ink-soft); }
.demo-status { font-size: 16px !important; }
.demo-status.active { color: #246647; }
.demo-status.attention { color: #805118; }
.demo-status.new { color: #655479; }
.demo-status.done { color: #275f84; }
.demo-status.overdue { color: #a12d37; }
.live-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.live-heading h2 { margin: 3px 0 5px; font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); }
.live-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.live-heading .btn { flex: 0 0 auto; }
.live-message { margin: 0; min-height: 18px; color: var(--ink-soft); font-size: 11px; }
.live-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.live-summary .manager-stat { min-height: 100px; }
.live-summary .manager-stat:nth-child(1) { border-color: #cfb4ec; background: linear-gradient(135deg, var(--surface), rgba(169, 103, 218, .13)); }
.live-summary .manager-stat:nth-child(2) { border-color: #9cd9b8; background: linear-gradient(135deg, var(--surface), rgba(57, 181, 111, .12)); }
.live-summary .manager-stat:nth-child(3) { border-color: #e5a0a5; background: linear-gradient(135deg, var(--surface), rgba(217, 54, 67, .15)); }
.live-summary .manager-stat:nth-child(3) strong { color: #a12d37; }
.live-summary .manager-stat:nth-child(4) { border-color: #a4d4ed; background: linear-gradient(135deg, var(--surface), rgba(66, 166, 222, .12)); }
.live-summary .manager-stat strong { font-size: 27px; }
.live-overview .tracker-section { min-width: 0; }
.admin-rankings { display: grid; gap: 14px; margin-top: 8px; padding: 22px; border: 1px solid #c8a9e3; border-radius: 16px; background: var(--surface-lilac); }
.admin-rankings > .section-heading h3 { font: 600 26px/1.1 var(--font-display); }
.admin-rankings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ranking-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ranking-card h4 { margin: 0; font: 600 20px/1.2 var(--font-display); }
.ranking-card > p { margin: 4px 0 14px; color: var(--ink-soft); font-size: 12px; }
.student-leaderboard { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.leaderboard-entry { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.leaderboard-entry.overdue { border-color: #e6a0a5; background: rgba(217, 54, 67, .12); }
.leaderboard-rank { color: var(--purple-dark); font-size: 15px; font-weight: 900; }
.leaderboard-entry button { min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 900; text-align: left; cursor: pointer; }
.leaderboard-entry button:hover { color: var(--purple); text-decoration: underline; }
.leaderboard-entry small { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.leaderboard-score { text-align: right; white-space: nowrap; }
.leaderboard-score strong { font-size: 12px; }
.ranking-card .live-konsi-table { min-width: 600px; }
@media (max-width: 1180px) { .admin-rankings-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .admin-rankings { padding: 15px; } .ranking-card { padding: 13px; } .leaderboard-entry { grid-template-columns: 28px minmax(0, 1fr) auto; } .leaderboard-entry .live-status { grid-column: 2 / -1; justify-self: start; } }
.deadline-alerts { display: grid; gap: 10px; padding: 16px; border: 1px solid #e5a0a5; border-radius: 12px; background: rgba(217, 54, 67, .07); }
.deadline-alerts .section-heading { margin: 0; }
.deadline-alerts h3 { color: #a12d37; }
.deadline-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.deadline-alert-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #e5a0a5; border-radius: 9px; background: var(--surface); }
.deadline-alert-card strong, .deadline-alert-card small { display: block; }
.deadline-alert-card strong { color: #a12d37; font-size: 12px; }
.deadline-alert-card small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.deadline-alert-card button { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 6px; color: white; background: #b73542; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.live-overview .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.live-overview .section-heading h3 { margin: 0; font: 600 19px/1.2 var(--font-display); }
.live-overview .section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.live-empty { margin: 14px 0 2px; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-soft); background: var(--surface-lilac); font-size: 12px; line-height: 1.5; }
.live-table-wrap { width: 100%; overflow-x: auto; }
.live-table { min-width: 1160px; table-layout: auto; }
.live-konsi-table { min-width: 690px; table-layout: auto; }
.live-table th, .live-table td, .live-konsi-table th, .live-konsi-table td { padding-inline: 8px; }
.live-table th:nth-child(1) { width: 4%; }
.live-table th:nth-child(2) { width: 15%; }
.live-table th:nth-child(3) { width: 15%; }
.live-table th:nth-child(4) { width: 13%; }
.live-table th:nth-child(5) { width: 24%; }
.live-table th:nth-child(6) { width: 13%; }
.live-table th:nth-child(7) { width: 8%; }
.live-table th:nth-child(8) { width: 8%; }
.live-meter { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-lilac); }
.live-meter span { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
.live-status { display: inline-block; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.live-status.active { color: #246647; background: #e4f5e8; }
.live-status.attention { color: #805118; background: #fff0cd; }
.live-status.new { color: #655479; background: #eee7f4; }
.live-status.done { color: #275f84; background: #e2f2fa; }
.live-status.overdue { color: #a12d37; background: #ffe3e4; }
.live-overview .student-row.overdue { background: rgba(217, 54, 67, .09); }
.live-overview .student-row.overdue td:first-child { border-left: 4px solid #d53947; }
.live-overview .student-row.overdue .student-profile-link { color: #a12d37; }
.deadline-note { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.deadline-note.overdue { color: #a12d37; }
.live-overview .student-row.active td:first-child { border-left: 3px solid #36a86a; }
.live-overview .student-row.attention td:first-child { border-left: 3px solid #e0a435; }
.live-overview .student-row.new td:first-child { border-left: 3px solid #a68ab8; }
.live-overview .student-row.done td:first-child { border-left: 3px solid #479dca; }
.student-profile-link { padding: 0; border: 0; color: var(--purple-dark); background: none; font: inherit; font-weight: 900; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.student-profile-link:hover, .student-profile-link:focus-visible { color: var(--purple); }
.student-profile-link span { font-size: 12px; text-decoration: none; }
.student-profile { display: grid; gap: 18px; padding: 22px; border: 1px solid #cdb2e2; border-radius: 14px; background: var(--surface); box-shadow: 0 12px 30px rgba(81, 37, 108, .1); scroll-margin-top: 24px; }
.student-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.student-profile-head h2 { margin: 3px 0; font: 600 clamp(23px, 2.5vw, 32px)/1.1 var(--font-display); }
.student-profile-head p:last-child { margin: 0; color: var(--ink-soft); font-size: 12px; }
.student-profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.student-profile-facts > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-lilac); }
.student-profile-facts > div:nth-child(2) { background: rgba(66, 166, 222, .1); }
.student-profile-facts > div:nth-child(3) { background: rgba(238, 167, 53, .12); }
.student-profile-facts > div:nth-child(4) { background: rgba(57, 181, 111, .1); }
.student-profile-facts span, .student-profile-facts strong, .student-profile-facts small { display: block; }
.student-profile-facts span { margin-bottom: 6px; color: var(--ink-soft); font-size: 11px; }
.student-profile-facts strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }
.student-profile-facts small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.student-profile-facts .live-meter { margin-top: 10px; }
.student-profile-facts .live-status { display: inline-block; }
.student-deadlines { display: grid; gap: 8px; }
.student-deadline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.student-deadline-row.overdue { border-color: #e6a0a5; background: #fff0f0; }
.student-deadline-row.done { border-color: #9cd9b8; background: #ecf8f0; }
.student-deadline-row strong, .student-deadline-row small { display: block; }
.student-deadline-row strong { font-size: 12px; }
.student-deadline-row small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.student-deadline-row.overdue small { color: #a12d37; font-weight: 800; }
.student-deadline-row button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); background: var(--surface); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.student-schedule-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 7px; }
.student-schedule-form label { display: grid; gap: 5px; min-width: 160px; color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.student-schedule-form select, .student-schedule-form input { min-height: 37px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); font: inherit; }
.student-schedule-form [role="status"] { flex-basis: 100%; color: #a12d37; font-size: 11px; }
.student-module-heading h3 { margin: 0 0 3px; font: 600 19px/1.2 var(--font-display); }
.student-module-heading p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.student-module-list { display: grid; gap: 8px; }
.student-module { padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.student-module.done { border-color: #9cd9b8; }
.student-module.active { border-color: #cdb4ec; }
.student-module.overdue { border-color: #e5a0a5; background: rgba(217, 54, 67, .07); }
.student-module summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; font-weight: 800; }
.student-module summary strong { flex: 0 0 auto; color: var(--purple-dark); }
.student-module.done summary strong { color: #246647; }
.student-module.overdue summary strong { color: #a12d37; }
.student-module.overdue .live-meter span { background: #d53947; }
.student-module .live-meter { margin-top: 8px; }
.student-module ol { display: grid; gap: 7px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.student-module li { display: flex; gap: 8px; font-size: 11px; line-height: 1.4; }
.student-module li.done { color: #246647; }
.student-module li.pending { color: var(--ink-soft); }
.student-module.overdue li.pending { color: #a12d37; }
.student-module li span { flex: 0 0 14px; font-weight: 900; }
.live-assign-label { display: grid; gap: 4px; font-size: 10px; font-weight: 800; }
.live-assign-label select { width: 100%; min-width: 105px; min-height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; color: var(--ink); background: var(--surface); font: inherit; }
.live-group { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.live-group:first-child { margin-top: 0; padding-top: 0; border: 0; }
.live-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.live-group-heading h4 { margin: 0; font-size: 13px; }
.live-group-heading h4 span { color: var(--muted); font-weight: 600; }
.live-group-heading > strong { color: var(--purple-dark); font-size: 11px; white-space: nowrap; }
@media (max-width: 900px) { .live-summary, .student-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .student-kpi-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .kpi-schedule-table > div { grid-template-columns: 1fr auto; gap: 3px 8px; }
  .kpi-schedule-table > div span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .student-kpi-assignment { align-items: flex-start; flex-direction: column; }
  .demo-banner, .demo-view-heading { align-items: stretch; flex-direction: column; }
  .demo-banner .btn { align-self: flex-start; }
  .live-heading { align-items: flex-start; }
  .live-heading .btn { min-height: 36px; padding-inline: 10px; }
  .live-overview .section-heading { display: block; }
  .live-overview .section-heading p { margin-top: 4px; }
  .live-table, .live-konsi-table { min-width: 0; }
  .live-table-wrap { overflow: visible; }
  .live-overview .tracker-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-overview .tracker-table td:nth-child(2),
  .live-overview .tracker-table td:nth-child(3),
  .live-overview .tracker-table td:nth-child(5) { grid-column: 1 / -1; }
  .live-overview .tracker-table td:first-child { grid-column: auto; }
  .live-summary .manager-stat { min-height: 90px; }
  .student-profile { padding: 16px; }
  .student-profile-head { align-items: stretch; flex-direction: column; }
  .student-profile-head .btn { align-self: flex-start; }
  .student-schedule-form label { flex: 1 1 100%; }
}
:root[data-theme="dark"] .student-deadline-row.overdue { background: rgba(217, 54, 67, .18); }
:root[data-theme="dark"] .student-deadline-row.done { background: rgba(57, 181, 111, .13); }
:root[data-theme="dark"] .deadline-note.overdue,
:root[data-theme="dark"] .student-deadline-row.overdue small,
:root[data-theme="dark"] .demo-status.overdue,
:root[data-theme="dark"] .deadline-alerts h3,
:root[data-theme="dark"] .deadline-alert-card strong,
:root[data-theme="dark"] .live-summary .manager-stat:nth-child(3) strong { color: #ff9aa2; }