/* Student portal: bright, progress-led, and calm enough for study. */
body.prog-student-portal {
    --prog-role-color: var(--prog-secondary);
    --prog-role-soft: color-mix(in srgb, var(--prog-secondary) 10%, var(--prog-surface));
}

.prog-theme-student-host {
    --prog-role-color: var(--prog-secondary);
    --prog-role-soft: color-mix(in srgb, var(--prog-secondary) 10%, var(--prog-surface));
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--prog-background);
}

body .prog-learning-portal--student {
    --prog-role-color: var(--prog-secondary);
    --prog-role-soft: color-mix(in srgb, var(--prog-secondary) 10%, var(--prog-surface));
}

.prog-learning-portal--student > .prog-learning-header {
    background: linear-gradient(125deg, var(--prog-header), color-mix(in srgb, var(--prog-secondary) 62%, var(--prog-header)));
}

.prog-learning-portal--student .prog-learning-hero,
.prog-learning-portal--student .prog-learning-welcome {
    background: linear-gradient(135deg, var(--prog-primary), color-mix(in srgb, var(--prog-secondary) 70%, var(--prog-primary)));
}

.prog-learning-portal--student .prog-learning-nav a.active > span,
.prog-learning-portal--student .prog-progress__bar {
    background: var(--prog-accent);
    color: var(--prog-on-accent);
}

.prog-student-portal .prog-portal-sidebar {
    background: linear-gradient(180deg, var(--prog-header), color-mix(in srgb, var(--prog-header) 76%, var(--prog-secondary)));
}

.prog-student-welcome {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(125deg, var(--prog-primary), color-mix(in srgb, var(--prog-secondary) 74%, var(--prog-primary)));
    color: var(--prog-on-primary);
}

.prog-student-welcome::after {
    position: absolute;
    z-index: -1;
    right: -5rem;
    bottom: -7rem;
    width: 18rem;
    height: 18rem;
    border: 3rem solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.prog-student-welcome h2,
.prog-student-welcome h3,
.prog-student-welcome p {
    color: inherit;
}

.prog-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.prog-subject-card {
    position: relative;
    min-height: 11rem;
    overflow: hidden;
    border-top: 5px solid var(--prog-subject-color, var(--prog-role-color));
}

.prog-subject-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--prog-role-soft);
    color: var(--prog-role-color);
}

.prog-homework-chip {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--prog-border);
    border-radius: 999px;
    background: var(--prog-surface-soft);
    font-size: 0.82rem;
    font-weight: 750;
}

.prog-homework-chip--due {
    border-color: color-mix(in srgb, var(--prog-warning) 35%, var(--prog-border));
    color: var(--prog-warning);
}

.prog-achievement-badge {
    display: grid;
    min-height: 9rem;
    place-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--prog-accent) 45%, var(--prog-border));
    border-radius: var(--prog-radius);
    background: color-mix(in srgb, var(--prog-accent) 10%, var(--prog-surface));
    text-align: center;
}

.prog-achievement-badge__icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    margin-bottom: 0.55rem;
    border-radius: 50%;
    background: var(--prog-accent);
    color: var(--prog-on-accent);
}

.prog-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-inline-start: 5px solid var(--prog-role-color);
    border-radius: var(--prog-radius-small);
    background: var(--prog-role-soft);
}

.prog-student-portal .prog-progress__bar {
    background: var(--prog-role-color);
}