:root .page-hero,
:root[data-theme="dark"] .page-hero {
    position: relative;
    background: radial-gradient(ellipse at top right, #163d6b 0%, #101f38 55%, #0b1425 100%) !important;
    color: #f8fafc !important;
    border-radius: 0 0 28px 28px;
    padding-block: clamp(2rem, 4vw, 3.5rem) !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
}
:root[data-theme="dark"] .page-hero {
    background: radial-gradient(ellipse at top right, #153459 0%, #0d192d 55%, #080f1c 100%) !important;
}
:root .page-hero.page-hero--compact {
    padding: clamp(1rem, 2.5vw, 1.5rem) !important;
    border-radius: 16px;
}
:root .page-hero > :is(.container, .reports-container) { max-width: 1200px; }
:root .page-hero h1 {
    color: #f8fafc !important;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    text-shadow: none !important;
}
:root .page-hero--compact h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
:root .page-hero .lead { font-size: 1.1rem !important; line-height: 1.65 !important; }
:root .page-hero .page-hero-muted { color: #cbd5e1 !important; opacity: 1; }
:root .page-hero .page-hero-panel,
:root[data-theme="dark"] .page-hero .page-hero-panel {
    background: #17283f !important;
    color: #f8fafc !important;
    border: 1px solid #3b506b !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
    backdrop-filter: none !important;
}
:root .page-hero .page-hero-panel :is(h2, h3, h4, h5, strong, .text-dark) { color: #f8fafc !important; }
:root .page-hero .page-hero-panel .text-muted { color: #cbd5e1 !important; }
:root .page-hero .page-hero-panel .text-primary { color: #93c5fd !important; }
:root .page-hero .page-hero-panel .badge.bg-primary-subtle { background: #213650 !important; }
:root .page-hero .progress { background: #334b66 !important; }
:root .page-hero .progress-bar { background: #60a5fa !important; }
:root .page-hero .btn {
    min-height: 44px;
    min-width: 44px;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    box-shadow: none !important;
}
:root .page-hero :is(.btn-primary, .btn-light) {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
:root .page-hero :is(.btn-primary, .btn-light):hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
:root .page-hero .btn-outline-light,
:root .page-hero .page-hero-panel .btn-outline-secondary {
    color: #f8fafc !important;
    border-color: #94a3b8 !important;
    background: transparent;
}
:root .page-hero .btn-outline-light:hover,
:root .page-hero .page-hero-panel .btn-outline-secondary:hover {
    color: #0f172a !important;
    background: #e2e8f0;
}
:root .page-hero :focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
:root .page-hero .btn-outline-danger { color: #fda4af; border-color: #fda4af; }
:root .page-hero .btn-outline-danger:hover { color: #fff; background: #b91c1c; border-color: #b91c1c; }
:root[data-theme="dark"] .page-hero .glass-card .btn-outline-primary { color: #93c5fd; border-color: #93c5fd; }
:root[data-theme="dark"] .page-hero .glass-card .btn-outline-primary:hover { color: #fff; background: #1d4ed8; }
:root .page-hero :is(.hero-blob, .page-hero-decoration) { display: none; }
:root .page-hero::before,
:root .page-hero::after { content: none !important; }
:root .page-hero .page-hero-actions { flex-wrap: wrap; gap: .75rem; }
:root .page-hero .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1rem; }
:root .page-hero .row > *,
:root .page-hero .page-hero-actions > * { min-width: 0; }
:root .page-hero.learning-hero { padding: 0 !important; }
:root .page-hero.learning-hero > .card-body { padding: clamp(1rem, 3vw, 2rem) !important; }
:root .page-hero.kahoot-host-hero > .container { max-width: none; }
:root .page-hero .students-hero-metrics span,
:root .page-hero .hero-eyebrow { color: #cbd5e1; }
@media (max-width: 575.98px) {
    :root .page-hero { border-radius: 0 0 20px 20px; }
    :root .page-hero .page-hero-actions { align-items: flex-start !important; }
}