:root {
    --bg: #f3efe7;
    --paper: #fffdf8;
    --paper-strong: rgba(255, 253, 248, 0.92);
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #e7dfd1;
    --brand: #005f73;
    --brand-strong: #073b4c;
    --brand-soft: #e0f0ed;
    --accent: #ca6702;
    --accent-soft: #f7ebdd;
    --danger: #ae2012;
    --success: #2a9d8f;
    --shadow: 0 18px 45px rgba(38, 52, 56, 0.08);
    --shadow-soft: 0 10px 28px rgba(38, 52, 56, 0.06);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --public-header-height: 88px;
    --content-width: 1920px;
    --content-gutter: 16px;
    --professional-blue: #206671;
    --professional-blue-light: #2d8a9f;
    --professional-blue-dark: #164a57;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    background:
        radial-gradient(circle at top right, rgba(202, 103, 2, 0.15), transparent 24%),
        linear-gradient(135deg, #f7f2e9 0%, #f1f6f5 100%);
    color: var(--ink);
}

.public-home-body {
    background:
        radial-gradient(circle at top right, rgba(202, 103, 2, 0.18), transparent 22%),
        radial-gradient(circle at bottom left, rgba(0, 95, 115, 0.1), transparent 26%),
        linear-gradient(135deg, #f8f5ee 0%, #eef7f4 100%);
}

textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    resize: vertical;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
input[type="file"],
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(0, 95, 115, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 95, 115, 0.12);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
}

.app-shell-public {
    display: block;
}

.sidebar {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 22%),
        linear-gradient(180deg, #051f2b 0%, #083845 48%, #0d4650 100%);
    color: #fff;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

.sidebar-brand {
    padding: 10px 14px 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(164, 214, 223, 0.28), rgba(118, 191, 204, 0.18));
    border: 1px solid rgba(185, 229, 236, 0.22);
    display: grid;
    gap: 10px;
    justify-items: center;
}

.sidebar-brand-mark {
    width: 178px;
    height: 138px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #fff;
}

.sidebar-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.64rem;
    opacity: 0.75;
    margin: 0 0 8px;
}

.subject-list .helper,
.subject-list p,
.subject-list span,
.subject-list label,
.enrollment-subject-option span,
#enrollment-scholarship-preview,
#enrollment-subjects-empty {
    color: #0b2d4d;
}

.brand-title {
    margin: 0;
    font-size: calc(1.45rem - 1px);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.brand-copy,
.muted,
.helper {
    color: var(--muted);
    line-height: 1.65;
}

.brand-copy {
    font-size: 0.9rem;
    line-height: 1.45;
}

.helper-success {
    color: #087443;
    font-weight: 700;
}

.helper-success-light {
    color: #39ff14;
}

.helper a {
    color: var(--brand);
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.sidebar .brand-copy {
    color: rgba(255, 255, 255, 0.72);
}

.nav {
    display: grid;
    gap: 8px;
}

.nav a {
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 600;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 52px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.nav a span:last-child {
    line-height: 1.32;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.nav a.is-active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(202, 103, 2, 0.22));
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 32px 32px;
}

.content-public-home {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    height: auto;
    padding: 0;
    padding-top: var(--public-header-height);
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
    background: transparent;
}

.content-public-home section {
    scroll-margin-top: 110px;
}

.public-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 14px 40px;
    backdrop-filter: blur(20px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 248, 0.92));
    border-bottom: 1px solid rgba(0, 95, 115, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.hero-carousel-wrap,
.home-academic-shell,
.landing-sections,
.landing-cta {
    scroll-margin-top: 90px;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.public-brand:hover {
    opacity: 0.85;
}

.brand-text {
    display: grid;
    gap: 2px;
    
}

.public-brand strong {
    font-size: 1.32rem;
    color: #0f3a47;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.public-brand small {
    color: #666;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.public-brand-mark {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, #073b4c 0%, #ca6702 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}

.public-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.home-public-brand-mark {
    width: 250px;
    height: 100px;
    padding: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-public-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auth-public-brand-mark {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.public-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 1;
    justify-content: center;
    margin: 0 auto;    
}

.nav-link {
    color: #555;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.01em;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.public-nav .nav-link {
    font-size: 20px;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #15525F, #1a6b7f);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: #15525F;
    background: rgba(21, 82, 95, 0.08);
}

.nav-link:hover::after {
    width: 24px;
}

.public-topbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.button-primary {
    background: linear-gradient(135deg, #15525F, #1a6b7f) !important;
    box-shadow: 0 8px 16px rgba(21, 82, 95, 0.2) !important;
}

.button-primary:hover {
    box-shadow: 0 12px 24px rgba(21, 82, 95, 0.3) !important;
    transform: translateY(-2px);
}

/* Menú Hamburguesa */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    width: 32px;
    height: 32px;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-sidebar-toggle {
    display: none;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #15525F;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Menú Móvil */
.mobile-nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 248, 0.96));
    border-bottom: 1px solid rgba(0, 95, 115, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 19;
    backdrop-filter: blur(20px);
}

.mobile-nav.is-open {
    max-height: 100vh;
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 0;
}

.mobile-nav-link {
    padding: 14px 16px;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: block;
}

.mobile-nav-link:hover {
    background: rgba(21, 82, 95, 0.08);
    color: #15525F;
}

.mobile-nav-divider {
    height: 1px;
    background: rgba(0, 95, 115, 0.1);
    margin: 8px 0;
}

.mobile-nav-button {
    background: linear-gradient(135deg, #15525F, #1a6b7f);
    color: white;
    text-align: center;
    margin-top: 8px;
}

.button-link,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    padding: 18px 27px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.button-link:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0, 95, 115, 0.16);
}

.button-secondary {
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: none;
}

.hero-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 34px 40px 24px;
}

.hero-banner-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.85fr);
    gap: 28px;
    align-items: stretch;
    padding: 42px;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(231, 223, 209, 0.9);
    box-shadow: var(--shadow);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.22), transparent 28%),
        linear-gradient(135deg, #062f3d 0%, #0a505e 52%, #13655e 100%);
}

.hero-banner-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    color: #fff;
}

.hero-banner-copy h1 {
    margin: 0;
    font-size: clamp(3rem, 5vw, 5.4rem);
    line-height: 1.02;
    max-width: 860px;
}

.hero-banner-lead {
    margin: 0;
    max-width: 760px;
    font-size: 1.4rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

.hero-banner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.hero-banner-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 600;
}

.hero-banner-panel {
    display: grid;
    gap: 18px;
    align-content: center;
}

.hero-banner-card,
.hero-banner-stat {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #fff;
}

.hero-banner-card {
    display: grid;
    gap: 14px;
    padding: 26px;
}

.hero-banner-card strong {
    font-size: 2rem;
    line-height: 1.15;
}

.hero-banner-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.7;
    font-size: 1.12rem;
}

.hero-banner-card-highlight .showcase-pill {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.hero-banner-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hero-banner-stat {
    display: grid;
    gap: 8px;
    padding: 22px 18px;
}

.hero-banner-stat strong {
    font-size: 1.9rem;
}

.hero-banner-stat span {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 26px;
    margin: 0;
    min-height: 100vh;
    padding: 28px;
    align-items: stretch;
}

.landing-hero-screen {
    min-height: calc(100vh - 79px);
}

.landing-copy,
.landing-showcase {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: var(--shadow);
}

.landing-copy {
    padding: 40px;
    color: #fff;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.28), transparent 28%),
        linear-gradient(135deg, #073b4c 0%, #0a525a 48%, #115c52 100%);
}

.landing-copy::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.landing-kicker {
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.8;
}

.landing-copy h2 {
    margin: 0;
    font-size: clamp(2.6rem, 4vw, 4.1rem);
    line-height: 1.08;
    max-width: 760px;
}

.landing-lead {
    max-width: 760px;
    margin: 24px 0 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 42px;
}

.hero-metric {
    display: grid;
    gap: 12px;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}

.hero-metric strong {
    font-size: 1.9rem;
}

.hero-metric span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
    line-height: 1.7;
}

.landing-showcase {
    padding: 26px;
    border: 1px solid rgba(231, 223, 209, 0.85);
    background:
        radial-gradient(circle at top right, rgba(0, 95, 115, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 246, 0.94));
}

.showcase-main {
    margin-bottom: 16px;
}

.showcase-card {
    display: grid;
    gap: 14px;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid rgba(231, 223, 209, 0.95);
    background: rgba(255, 255, 255, 0.9);
}

.showcase-card h3 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
}

.showcase-pill {
    display: inline-flex;
    width: fit-content;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1rem;
    font-weight: 600;
}

.icon-chip {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.14), rgba(202, 103, 2, 0.18));
    color: var(--brand-strong);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border: 1px solid rgba(0, 95, 115, 0.12);
}

.icon-chip.accent {
    color: var(--accent);
    background: linear-gradient(135deg, rgba(202, 103, 2, 0.12), rgba(202, 103, 2, 0.22));
}

.icon-chip.neutral {
    background: linear-gradient(135deg, rgba(7, 59, 76, 0.08), rgba(0, 95, 115, 0.12));
}

.showcase-grid,
.showcase-stack {
    display: grid;
    gap: 18px;
}

.showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
}

.showcase-grid div {
    display: grid;
    gap: 10px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(0, 95, 115, 0.06);
}

.landing-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0 40px 28px;
    align-items: stretch;
}

.band-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 30px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(231, 223, 209, 0.95);
    box-shadow: var(--shadow);
    min-height: 190px;
}

.band-card p {
    margin: 0;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
}

.landing-sections {
    align-items: stretch;
}

.landing-panel {
    padding: 6px;
}

.landing-info-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
    margin-bottom: 26px;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.reasons-grid-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reason-card,
.program-item,
.highlight-point,
.step-item {
    border: 1px solid rgba(231, 223, 209, 0.95);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    padding: 24px;
}

.reason-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 34px 30px;
}

.reason-card p,
.step-item p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.75;
    font-size: 1.5rem;
}

.program-list,
.steps-list,
.highlight-points {
    display: grid;
    gap: 14px;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.program-item {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 210px;
}

.home-faculty-item {
    min-height: auto;
}

.home-enrollment-panel {
    display: grid;
    gap: 28px;
    padding: 32px;
}

.home-enrollment-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    padding: 0 0 18px;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 95, 115, 0.12);
    align-items: stretch;
}

.home-enrollment-copy {
    display: grid;
    gap: 18px;
}

.home-enrollment-card,
.home-enrollment-sidecard {
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(7, 59, 76, 0.96), rgba(9, 77, 91, 0.94));
    color: #fff;
    box-shadow: 0 20px 42px rgba(7, 59, 76, 0.2);
    min-height: 100%;
}

.home-enrollment-sidecard {
    align-content: space-between;
}

.home-enrollment-intro h3 {
    margin: 0;
    max-width: 980px;
    font-size: clamp(2.8rem, 4.1vw, 4.4rem);
    line-height: 1.05;
    color: #fff;
}

.home-enrollment-intro .helper {
    max-width: 900px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.2rem;
    line-height: 1.8;
}

.home-enrollment-intro .home-enrollment-lead {
    max-width: 980px;
    font-size: 1.34rem;
    color: rgba(255, 255, 255, 0.92);
}

.home-enrollment-intro .showcase-pill {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.home-enrollment-points {
    display: grid;
    gap: 12px;
    align-content: start;
}

.home-enrollment-points span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 18px;
    min-height: 64px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.home-point-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(202, 103, 2, 0.95), rgba(241, 164, 75, 0.88));
    color: #fff4df;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 18px rgba(202, 103, 2, 0.24);
}

.home-enrollment-intro .hero-actions {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.home-enrollment-sidecard .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.home-enrollment-sidecard .button-link {
    min-height: 54px;
    border-radius: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ca6702, #e28a23);
    box-shadow: 0 16px 28px rgba(202, 103, 2, 0.24);
}

.home-enrollment-sidecard .button-link:hover {
    box-shadow: 0 18px 32px rgba(202, 103, 2, 0.3);
}

.home-enrollment-sidecard .button-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.home-enrollment-sidecard .button-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 24px rgba(7, 59, 76, 0.2);
}

.home-programs-head {
    margin-bottom: 0;
}

.home-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-demand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-faculty-item {
    position: relative;
    min-height: auto;
    display: grid;
    gap: 10px;
    border-radius: 16px;
    padding: 20px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(135deg, #15525F, #1a6b7f);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    color: #fff;
}

.home-program-grid .home-faculty-item > span:last-child,
.home-program-grid .home-faculty-item strong {
    text-align: left;
}

.home-faculty-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(255, 255, 255, 0.04));
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.home-faculty-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 48px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.22);
}

.home-faculty-item:hover::before {
    opacity: 1;
}

.home-faculty-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

.home-program-grid .home-faculty-badge {
    display: none;
}

.home-faculty-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.home-faculty-icon svg {
    width: 20px;
    height: 20px;
}

.home-faculty-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.home-faculty-item strong {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.3;
}

.home-faculty-item > span:last-child {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.94rem;
    line-height: 1.5;
    text-align: left;
}

.program-item span {
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.08rem;
}

.home-faculty-item span {
    color: rgba(255, 255, 255, 0.88);
}

.landing-highlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 28px;
    margin: 0 40px 28px;
    padding: 38px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(202, 103, 2, 0.16), transparent 24%),
        linear-gradient(135deg, #fffaf2 0%, #f3f8f6 100%);
    border: 1px solid rgba(231, 223, 209, 0.95);
    box-shadow: var(--shadow);
}

.highlight-copy h3 {
    margin: 12px 0 18px;
    font-size: clamp(2.4rem, 3.4vw, 3.6rem);
    line-height: 1.15;
}

.highlight-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    font-size: 1.5rem;
}

.highlight-point {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 150px;
}

.highlight-point span {
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.5rem;
}

.step-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}

.step-item span {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.landing-cta {
    margin: 0;
    padding: 0 40px 36px;
}

.landing-cta-card {
    padding: 48px;
    border-radius: 32px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 22%),
        linear-gradient(135deg, #0a525a 0%, #115c52 55%, #ca6702 130%);
    box-shadow: var(--shadow);
}

.landing-cta-card h3 {
    margin: 12px 0 18px;
    font-size: clamp(2.8rem, 4.2vw, 4rem);
    line-height: 1.12;
}

.landing-cta-card p:not(.landing-kicker) {
    max-width: 780px;
    line-height: 1.8;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.landing-access {
    margin: 0 28px 28px;
}

.landing-sections {
    display: grid;
    gap: 22px;
    align-items: stretch;
}

.landing-sections-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0 40px 40px;
}

.benefits-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.landing-page-block {
    margin: 0;
    padding: 0 28px 28px;
}

.hero-carousel-wrap + .landing-page-block {
    margin-top: 40px;
}

.landing-split {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
    gap: 28px;
    align-items: stretch;
    padding: 0 40px 40px;
}

.landing-split-accent .split-copy {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 28%),
        linear-gradient(145deg, #083d4a 0%, #0a525a 62%, #115c52 100%);
    color: #fff;
}

.split-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 42px;
    border-radius: 30px;
    border: 1px solid rgba(231, 223, 209, 0.95);
    background: #fff;
    box-shadow: var(--shadow);
}

.split-copy h3 {
    margin: 0;
    font-size: clamp(2.5rem, 3.4vw, 3.8rem);
    line-height: 1.14;
}

.split-copy p:last-child {
    margin: 0;
    line-height: 1.8;
    font-size: 1.5rem;
}

.split-copy-dark {
    background: linear-gradient(145deg, #fffaf2 0%, #eef7f4 100%);
}

.landing-visual-panel {
    background:
        radial-gradient(circle at top right, rgba(0, 95, 115, 0.22), transparent 26%),
        radial-gradient(circle at bottom left, rgba(202, 103, 2, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 246, 0.94));
}

.feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}

.access-list {
    display: grid;
    gap: 14px;
}

.access-item {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0, 95, 115, 0.06);
}

.classroom-layout {
    align-items: start;
}

.classroom-side {
    position: sticky;
    top: 24px;
}

.course-list {
    display: grid;
    gap: 12px;
}

.course-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.course-card.is-active,
.course-card:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 16px 26px rgba(0, 95, 115, 0.08);
}

.activity-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    padding: 22px;
    margin-top: 18px;
}

.activity-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
}

.activity-card-head h3 {
    margin: 10px 0 0;
}

.activity-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    color: var(--muted);
    font-size: 0.92rem;
}

.quiz-builder,
.stack,
.inline-grade-form,
.forum-thread,
.materials-grid {
    display: grid;
    gap: 14px;
}

.quiz-question-item,
.forum-post,
.result-banner,
.resource-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 253, 248, 0.85);
    padding: 16px;
}

.materials-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.resource-card h3 {
    margin: 10px 0;
}

.resource-card p {
    margin: 0 0 10px;
}

.forum-post strong,
.forum-post span {
    display: block;
}

.result-banner {
    margin: 12px 0 18px;
    background: rgba(42, 157, 143, 0.09);
    border-color: rgba(42, 157, 143, 0.28);
}

.result-banner-score,
.result-banner-feedback {
    display: block;
}

.result-banner-feedback {
    margin-top: 8px;
}

.quiz-fieldset {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.checkbox {
    display: flex;
    gap: 10px;
    align-items: start;
}

@media (max-width: 960px) {
    .app-shell,
    .public-hero,
    .grid-two {
        grid-template-columns: 1fr;
    }

    .classroom-side {
        position: static;
    }

    .content {
        padding: 20px;
    }

    .app-shared-footer-admin {
        width: 100%;
        margin: 0;
    }
}

.content-auth {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(202, 103, 2, 0.16), transparent 24%),
        radial-gradient(circle at bottom right, rgba(0, 95, 115, 0.14), transparent 28%),
        linear-gradient(135deg, #f8f4ec 0%, #eef7f4 100%);
}

.content.content-public-home {
    display: block;
    min-height: auto;
    height: auto;
    overflow-y: visible;
    background: transparent;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding: 22px 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #062f3f 0%, #0a4456 45%, #0b4d63 100%);
    border: 1px solid rgba(7, 38, 47, 0.9);
    box-shadow: 0 14px 34px rgba(5, 29, 38, 0.18);
}

.topbar-copy {
    min-width: 0;
}

.topbar h2 {
    margin: 2px 0 8px;
    font-size: 2.05rem;
    line-height: 1.08;
    letter-spacing: -0.05em;
    color: #ffffff;
    font-weight: 800;
}

.topbar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.topbar-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
    margin-bottom: 6px;
}

.topbar-user-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.96rem;
    color: #ecf7fa;
    font-weight: 700;
}

.topbar-user-line span {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
}

.topbar-meta {
    display: flex;
    justify-content: flex-end;
}

.topbar-pill {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0a3b49 0%, #0d5468 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 230px;
    box-shadow: 0 10px 22px rgba(5, 21, 27, 0.18);
}

.topbar-pill-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.topbar-pill-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.topbar-pill strong {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.topbar-pill span:last-child {
    display: block;
    color: rgba(232, 244, 248, 0.9);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.topbar-pill-icon {
    position: relative;
}

.topbar-pill-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}

.topbar-pill-icon svg {
    position: relative;
    z-index: 1;
}

.alert,
.panel,
.auth-card,
.stat-card {
    background: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow);
}

.alert {
    border-left: 6px solid var(--brand);
    padding: 14px 18px;
    border-radius: 16px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.45s ease both;
}

.alert-error {
    border-left-color: var(--danger);
}

.alert-success {
    border-left-color: var(--success);
}

.alert::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: currentColor;
    opacity: 0.16;
}

.auth-card {
    width: min(620px, 100%);
    padding: 40px;
    border-radius: 28px;
}

.auth-shell {
    width: min(1320px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.92fr);
    gap: 34px;
    align-items: center;
    justify-content: center;
}

.auth-shell-single {
    width: 100vw;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    place-content: center;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.auth-showcase,
.auth-card-premium {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.auth-showcase {
    padding: 46px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.26), transparent 28%),
        linear-gradient(135deg, #073b4c 0%, #0d5961 50%, #1a6e63 100%);
}

.auth-showcase::after,
.auth-card-premium::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}

.auth-showcase::after {
    width: 220px;
    height: 220px;
    right: -60px;
    top: -40px;
    background: #fff;
}

.auth-showcase h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.02;
    max-width: 780px;
    margin-inline: auto;
}

.auth-lead {
    margin: 18px 0 0;
    max-width: 680px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin-inline: auto;
}

.auth-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.auth-metric-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    text-align: center;
    justify-items: center;
}

.auth-metric-card strong {
    font-size: 1.05rem;
}

.auth-metric-card span {
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
    font-size: 0.93rem;
}

.auth-card-premium {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 44px;
    justify-items: center;
    text-align: center;
    background:
        radial-gradient(circle at top right, rgba(202, 103, 2, 0.16), transparent 26%),
        radial-gradient(circle at bottom left, rgba(42, 157, 143, 0.18), transparent 28%),
        linear-gradient(160deg, #083847 0%, #0a4d5b 52%, #114f4f 100%);
}

.auth-card-premium-compact {
    max-width: 760px;
    margin: 0 auto;
}

.auth-card-premium-compact .brand-kicker,
.auth-card-premium-compact h2,
.auth-card-premium-compact .muted,
.auth-card-premium-compact .helper,
.auth-card-premium-compact .helper a,
.auth-card-premium-compact .auth-links a,
.auth-card-premium-compact label {
    color: #fbfefe;
}

.auth-card-premium-compact .brand-kicker {
    opacity: 0.84;
}

.auth-card-premium-compact .muted,
.auth-card-premium-compact .helper {
    color: rgba(244, 250, 251, 0.92);
}

.auth-card-premium-compact .auth-links a,
.auth-card-premium-compact .helper a {
    color: #ffdca8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.auth-card-premium-compact .auth-form input {
    border: 1px solid rgba(154, 195, 201, 0.34);
    background: rgba(248, 252, 252, 0.96);
    color: #17323a;
}

.auth-card-premium-compact .auth-form button {
    background: linear-gradient(135deg, #ca6702 0%, #a74f00 100%);
}

.auth-card-premium-compact .alert {
    background: rgba(248, 252, 252, 0.95);
    color: var(--ink);
}

.auth-card-premium-compact .dev-note {
    background: rgba(233, 245, 247, 0.95);
    border-color: rgba(154, 195, 201, 0.54);
    color: var(--ink);
}

.auth-card-premium-compact .dev-note code {
    background: rgba(255, 255, 255, 0.95);
}

.auth-card-head {
    max-width: 540px;
    margin: 0 auto;
}

.auth-card-head h2 {
    margin: 0;
}

.auth-form {
    width: min(460px, 100%);
    margin: 0 auto;
}

.auth-form label {
    text-align: left;
}

.auth-form button {
    width: 100%;
}

.auth-card-premium::after {
    width: 180px;
    height: 180px;
    right: -40px;
    bottom: -60px;
    background: var(--brand);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: center;
}

.auth-links a {
    color: var(--brand);
    font-weight: 700;
}

.login-stage {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.login-panel {
    width: min(760px, 100%);
    display: grid;
    gap: 24px;
    justify-items: center;
    text-align: center;
}

.login-panel-head {
    display: grid;
    gap: 14px;
    justify-items: center;
    max-width: 720px;
}

.login-mark {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #073b4c 0%, #ca6702 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}

.login-brand-copy h2 {
    margin: 0;
    color: var(--brand-strong);
    font-size: clamp(2rem, 4vw, 3rem);
}

.login-lead {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.login-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.login-trust-row span {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
    color: var(--brand);
    font-weight: 700;
}

.login-info-grid {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.login-info-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(231, 223, 209, 0.92);
}

.login-info-card strong {
    color: var(--brand-strong);
}

.login-info-card span {
    color: var(--muted);
    line-height: 1.6;
}

.login-form {
    width: min(520px, 100%);
    display: grid;
    gap: 16px;
}

.login-form label {
    display: grid;
    gap: 8px;
    text-align: center;
    color: var(--brand-strong);
    font-weight: 700;
}

.login-form input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(215, 219, 224, 0.95);
    background: rgba(255, 255, 255, 0.98);
}

.login-form button {
    width: 100%;
}

.login-links {
    width: min(520px, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
}

.login-links a {
    color: var(--brand);
    font-weight: 700;
}

.auth-login-shell {
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding: 24px 28px 32px;
    position: relative;
}

.auth-login-shell-compact {
    display: grid;
    align-items: center;
}

.auth-login-stack {
    width: 100%;
    display: grid;
    gap: 0;
    overflow: hidden;
}

.auth-login-shell::before {
    content: none;
}

.auth-login-shell::after {
    content: none;
}

.auth-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.74fr);
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(138, 175, 181, 0.2);
    box-shadow:
        0 30px 60px rgba(2, 20, 25, 0.36),
        0 8px 20px rgba(2, 20, 25, 0.18);
    overflow: hidden;
}

.auth-login-hero {
    display: grid;
    align-content: start;
    gap: 24px;
    padding: 58px 54px;
    color: #fff;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(7, 59, 76, 0.98), rgba(0, 95, 115, 0.94));
}

.auth-login-access {
    display: grid;
    align-content: start;
    gap: 22px;
    padding: 58px 48px;
    background:
        radial-gradient(circle at top right, rgba(42, 157, 143, 0.18), transparent 22%),
        radial-gradient(circle at bottom left, rgba(202, 103, 2, 0.14), transparent 28%),
        linear-gradient(180deg, #dbe7e6 0%, #c8d8d7 100%);
}

.auth-login-topline {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-login-top-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: #1b5660;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.auth-login-top-text {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 700;
}

.auth-login-brand {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 18px;
    align-items: center;
    width: 100%;
    text-align: left;
}

.auth-login-mark {
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #073b4c 0%, #ca6702 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 20px 30px rgba(7, 59, 76, 0.16);
}

.auth-login-brand h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.12;
}

.auth-login-logo-panel {
    display: grid;
    justify-items: start;
    gap: 22px;
    padding: 28px;
    border-radius: 28px;
    background: #1a6674;
    border: 1px solid #3c8794;
}

.auth-login-logo-mark {
    width: 230px;
    height: 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-login-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auth-login-logo-copy {
    display: grid;
    gap: 10px;
    width: 100%;
    text-align: center;
    justify-items: center;
}

.auth-login-logo-copy .brand-kicker {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.auth-login-logo-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 4.8vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
}

.auth-login-logo-copy p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    font-size: 1.08rem;
    max-width: 540px;
}

.auth-login-copy {
    width: 100%;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    text-align: left;
    line-height: 1.8;
    font-size: 1.14rem;
}

.auth-login-copy-hero {
    max-width: 620px;
    font-size: 1.18rem;
}

.auth-login-pills {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.auth-login-pills span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #19505b;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    border: 1px solid #316b74;
}

.auth-login-pills-hero {
    margin-top: 4px;
}

.auth-login-access-head {
    display: grid;
    gap: 10px;
}

.auth-login-access-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #b9d2d2;
    color: #0c3845;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-login-access-head h3 {
    margin: 0;
    color: #0a313c;
    font-size: 2.2rem;
    line-height: 1.15;
}

.auth-login-access-head p {
    margin: 0;
    color: #35555d;
    line-height: 1.7;
    font-size: 1.02rem;
}

.auth-login-note {
    width: 100%;
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #edf4f3;
    border: 1px solid #9dbabd;
    text-align: left;
}

.auth-login-note strong {
    color: var(--brand-strong);
    font-size: 1.08rem;
}

.auth-login-note span {
    color: #35555d;
    line-height: 1.7;
    font-size: 1rem;
}

.auth-login-form {
    width: 100%;
    max-width: none;
    gap: 18px;
}

.auth-login-form label {
    gap: 10px;
    color: #0a313c;
    font-weight: 700;
    font-size: 1rem;
}

.auth-login-form input {
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid #8eaeb3;
    background: #f9fcfc;
    color: #17323a;
    font-size: 1rem;
}

.auth-form input::placeholder,
.auth-login-form input::placeholder {
    color: #5b7780;
    opacity: 1;
}

.auth-login-form button {
    margin-top: 6px;
    padding: 15px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    font-size: 1.05rem;
}

.auth-login-support {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(231, 223, 209, 0.9);
}

.auth-login-support a {
    color: #0a4655;
    font-weight: 700;
    font-size: 0.98rem;
}

.auth-login-footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.auth-login-footer span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 11px 16px;
    border-radius: 16px;
    background: #bcd6d8;
    color: var(--brand-strong);
    font-size: 0.96rem;
    font-weight: 800;
}

.auth-public-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    flex: 1 0 auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-self: stretch;
}

.auth-public-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 14px 28px;
    background: #2b7a86;
    border-bottom: 1px solid #5fa0aa;
}

.auth-public-topbar .public-brand {
    gap: 10px;
}

.auth-public-topbar .public-brand strong {
    font-size: 1.2rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.auth-public-topbar .public-brand small {
    font-size: 0.88rem;
    color: #d7e8ea;
}

.auth-public-topbar .public-brand-mark {
    width: 102px;
    height: 82px;
    border-radius: 12px;
    font-size: 1.05rem;
}

.auth-public-topbar .public-nav {
    gap: 48px;
}

.auth-public-topbar .public-nav a {
    padding: 8px 0;
    color: #f6fbfb;
    font-size: 30px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.auth-public-topbar .public-topbar-actions .button-link {
    min-height: 52px;
    padding: 15px 21px;
    border-radius: 12px;
    font-size: 0.9rem;
    background: #1b4c56;
    color: #ffffff;
    border: 1px solid #356972;
    box-shadow: none;
}

.auth-public-topbar .public-topbar-actions .button-link:hover {
    background: #245c67;
    box-shadow: 0 10px 20px rgba(2, 20, 25, 0.22);
}

.auth-elegant-footer {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 0;
    width: 100%;
    background: linear-gradient(135deg, #16535d 0%, #236c78 52%, #2f8491 100%);
}

.auth-elegant-footer-logo {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-elegant-footer-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auth-elegant-footer-compact {
    max-width: 760px;
    margin: 0 auto;
}

.auth-elegant-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
    width: 100%;
    padding: 18px 22px;
    border-radius: 0;
    background:
        linear-gradient(135deg, #16535d 0%, #236c78 52%, #2f8491 100%);
    border-top: 0;
    box-shadow: 0 14px 24px rgba(22, 83, 93, 0.26);
}

.auth-elegant-footer-brand {
    display: grid;
    gap: 5px;
    max-width: 560px;
}

.auth-elegant-footer-kicker {
    margin: 0;
    color: #e6f6f8;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
}

.auth-elegant-footer-brand strong {
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.auth-elegant-footer-brand span {
    color: #f5fcfd;
    line-height: 1.55;
    font-size: 0.98rem;
}

.auth-elegant-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
    align-items: center;
}

.auth-elegant-footer-meta {
    display: grid;
    width: 100%;
    justify-items: end;
    gap: 14px;
}

.auth-elegant-footer-links a {
    color: #ffffff;
    font-weight: 700;
    font-size: calc(0.9rem + 10px);
    text-transform: capitalize;
    opacity: 0.96;
}

.auth-elegant-footer-links a + a {
    position: relative;
    margin-left: 14px;
    padding-left: 14px;
}

.auth-elegant-footer-links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: rgba(247, 216, 179, 0.28);
}

.auth-elegant-footer-links a:hover {
    opacity: 1;
    color: #d9edf2;
}

.auth-elegant-footer-social {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 10px;
}

.auth-elegant-footer-social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.auth-elegant-footer-social a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}

.auth-elegant-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.app-shared-footer {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding-top: 0;
    align-self: end;
}

.app-shared-footer-admin {
    width: 100%;
    margin: 0;
}

.auth-demo-list {
    display: grid;
    gap: 12px;
}

.auth-demo-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(231, 223, 209, 0.88);
}

.auth-demo-item strong {
    color: var(--brand-strong);
}

.dashboard-highlight-card,
.classroom-summary-card,
.hero-metric {
    animation: floatSoft 6s ease-in-out infinite;
}

.fade-in-up {
    animation: fadeInUp 0.65s ease both;
}

.delay-1 {
    animation-delay: 0.12s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatSoft {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.grid-cards,
.grid-two {
    display: grid;
    gap: 20px;
}

.grid-cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 24px;
}

.grid-two {
    grid-template-columns: minmax(320px, 420px) 1fr;
}

.stat-card {
    border-radius: 24px;
    padding: 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card p,
.panel-head h3 {
    margin: 0;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    margin-top: 12px;
}

.stat-card.accent {
    background: linear-gradient(135deg, #005f73, #0a9396);
    color: #fff;
}

.panel {
    border-radius: 26px;
    padding: 24px;
    background: linear-gradient(135deg, #16535d 0%, #236c78 52%, #2f8491 100%);
    border: 1px solid rgba(22, 83, 93, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    color: #fff;
}

.panel p,
.panel .helper {
    color: rgba(255, 255, 255, 0.9);
}

.stat-card:hover,
.panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 42px rgba(38, 52, 56, 0.1);
}

.panel-narrow {
    max-width: 560px;
}

.panel-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.panel-head h3 {
    font-size: 1.35rem;
    color: #fff;
}

.teacher-students-panel {
    margin-top: 10px;
}

.form-grid,
.stack {
    display: grid;
    gap: 14px;
}

label,
fieldset {
    display: grid;
    gap: 8px;
    font-weight: 600;
}

input,
select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
}

button {
    border: 0;
    border-radius: 14px;
    padding: 12px 16px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}

.button-danger {
    background: var(--danger);
}

.table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 12px 16px;
    background: var(--brand);
    color: #fff;
}

.button-secondary {
    background: #d9e7ea;
    color: var(--ink);
}

.report-grid {
    margin-top: 8px;
}

.reports-page .panel {
    display: flex;
    flex-direction: column;
    min-height: 178px;
}

.reports-page .panel p,
.reports-page .panel .helper {
    flex: 1;
}

.reports-page .button-link,
.reports-page button {
    align-self: flex-start;
}

.report-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.report-actions-grid .panel {
    min-width: 0;
}

@media (max-width: 980px) {
    .report-actions-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

.settings-grid {
    align-items: start;
}

.dev-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eef7f8;
    border: 1px solid #c5dadd;
    display: grid;
    gap: 8px;
}

.dev-note code {
    overflow-wrap: anywhere;
    background: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.toggle {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toggle input {
    width: auto;
}

.actions-cell {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.actions-cell .button-link,
.actions-cell .button-danger,
.actions-cell button[type="submit"] {
    min-width: 132px;
    min-height: 38px;
    padding: 9px 14px;
    justify-content: center;
}

.actions-cell form {
    margin: 0;
}

.actions-cell form .button-danger,
.actions-cell form button[type="submit"] {
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
    color: #164a57;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #e8f4f7, #dbeef2);
    color: #164a57;
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

tbody tr:hover {
    background: rgba(0, 95, 115, 0.04);
}

tbody td[colspan] {
    padding: 28px 18px;
    text-align: center;
    color: var(--muted);
    background:
        radial-gradient(circle at top center, rgba(0, 95, 115, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(247, 250, 248, 0.92));
    font-weight: 600;
}

.students-table th,
.students-table td {
    text-align: center;
}

.students-table td {
    vertical-align: middle;
}

.students-table .actions-cell {
    justify-content: center;
}

.teachers-table th,
.teachers-table td {
    text-align: center;
    vertical-align: middle;
}

.teachers-table .actions-cell {
    justify-content: center;
}

.programs-table th,
.programs-table td {
    text-align: center;
    vertical-align: middle;
}

.programs-table .actions-cell {
    justify-content: center;
}

.subjects-table th,
.subjects-table td {
    text-align: center;
    vertical-align: middle;
}

.subjects-table .actions-cell {
    justify-content: center;
}

.periods-table th,
.periods-table td {
    text-align: center;
    vertical-align: middle;
}

.periods-table .actions-cell {
    justify-content: center;
}

.enrollments-table th,
.enrollments-table td {
    text-align: center;
    vertical-align: middle;
}

.enrollments-table .actions-cell {
    justify-content: center;
}

.enrollments-table .actions-cell .button-link,
.enrollments-table .actions-cell .button-danger {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
}

.grades-entry-table th,
.grades-entry-table td {
    text-align: center;
    vertical-align: middle;
}

.grades-entry-table input {
    min-width: 88px;
    text-align: center;
}

.grade-student-search-label {
    display: block;
    max-width: 420px;
    margin: 10px 0 12px 10px;
    color: #1565c0;
}

.grade-student-search-label input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    text-align: left;
}

.payments-table th,
.payments-table td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.payments-history-panel {
    text-align: center;
}

.payment-form-panel,
.payment-form-panel .panel-head,
.payment-form-panel form,
.payment-form-panel label,
.payment-form-panel small {
    text-align: left;
}

.payment-form-panel .evidence-link {
    margin-top: 8px;
}

.payments-history-panel .table-wrap {
    text-align: center;
}

.payments-history-panel .payments-table {
    margin-inline: auto;
}

.payments-history-panel .payments-table td,
.payments-history-panel .payments-table th,
.payments-history-panel .badge {
    text-align: center;
    justify-content: center;
}

.payments-table .actions-cell {
    justify-content: center;
}

.payments-table .payment-evidence-cell {
    justify-content: center;
}

.payments-table .payment-actions-cell {
    justify-content: center;
}

.payments-table .payment-actions-stack {
    display: grid;
    gap: 10px;
    width: 140px;
    justify-items: center;
}

.payments-table .payment-actions-stack form {
    margin: 0;
}

.payments-table .payment-actions-stack .button-link,
.payments-table .payment-actions-stack .button-danger {
    width: 140px;
}

.evidence-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d92d20;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.evidence-link:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

.payment-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.payment-balance.is-pending {
    color: #8f1d14;
    background: rgba(174, 32, 18, 0.14);
}

.payment-balance.is-paid {
    color: #176b5b;
    background: rgba(42, 157, 143, 0.16);
}

.evidence-link {
    display: inline-flex;
}

.users-table th,
.users-table td {
    text-align: center;
    vertical-align: middle;
}

.users-table .actions-cell {
    justify-content: center;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.permission-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
}

.permission-option input {
    width: auto;
}

.badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.88rem;
    font-weight: 700;
}

.badge-warning {
    background: rgba(202, 103, 2, 0.18);
    color: #8a4b00;
}

.badge-danger {
    background: rgba(174, 32, 18, 0.16);
    color: #8f1d14;
}

.forum-post,
.resource-card,
.quiz-question-item,
.result-banner,
.dashboard-quick-card,
.dashboard-stat-card,
.dashboard-highlight-card,
.classroom-summary-card,
.auth-demo-item,
.permission-option,
.access-item,
.reason-card,
.program-item,
.highlight-point,
.step-item {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.forum-post:hover,
.resource-card:hover,
.quiz-question-item:hover,
.dashboard-stat-card:hover,
.dashboard-highlight-card:hover,
.classroom-summary-card:hover,
.auth-demo-item:hover,
.permission-option:hover,
.access-item:hover,
.reason-card:hover,
.program-item:hover,
.highlight-point:hover,
.step-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(38, 52, 56, 0.08);
    border-color: rgba(0, 95, 115, 0.18);
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 20px;
    margin-bottom: 22px;
}

.dashboard-hero-main,
.dashboard-hero-side,
.dashboard-highlight-card,
.dashboard-stat-card,
.dashboard-quick-card {
    border-radius: 26px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.dashboard-hero-main {
    padding: 30px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(135deg, #073b4c 0%, #0c5960 54%, #1a6e63 100%);
}

.dashboard-kicker {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 800;
}

.dashboard-hero-main h3 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
    max-width: 760px;
}

.dashboard-hero-main > p:last-of-type {
    margin: 18px 0 0;
    max-width: 760px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.dashboard-hero-side {
    display: grid;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dashboard-highlight-card {
    display: grid;
    gap: 10px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 244, 238, 0.9));
}

.dashboard-highlight-card strong {
    font-size: 1.8rem;
    color: var(--brand-strong);
}

.dashboard-highlight-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.mini-bars {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-top: 6px;
    height: 56px;
}

.mini-bars span {
    width: 100%;
    min-width: 18px;
    border-radius: 999px 999px 10px 10px;
    height: var(--bar-size);
    background: linear-gradient(180deg, rgba(0, 95, 115, 0.28), rgba(202, 103, 2, 0.6));
}

.dashboard-highlight-card.accent {
    background: linear-gradient(135deg, #fff7ec 0%, #f6ece0 100%);
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.dashboard-stat-card {
    display: grid;
    gap: 10px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 255, 255, 0.92));
}

.dashboard-stat-card p {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-stat-card strong {
    font-size: 2.1rem;
    line-height: 1;
}

.dashboard-stat-card span {
    color: var(--muted);
    line-height: 1.6;
}

.sparkline {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 24px;
    margin-top: 2px;
}

.sparkline span {
    flex: 1;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.16);
}

.sparkline span:nth-child(1) {
    height: 35%;
}

.sparkline span:nth-child(2) {
    height: 70%;
}

.sparkline span:nth-child(3) {
    height: 100%;
}

.dashboard-stat-card.brand p,
.dashboard-stat-card.brand strong {
    color: var(--brand);
}

.dashboard-stat-card.accent p,
.dashboard-stat-card.accent strong {
    color: var(--accent);
}

.dashboard-stat-card.neutral p,
.dashboard-stat-card.neutral strong {
    color: var(--brand-strong);
}

.dashboard-panels {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
}

.dashboard-quick-grid {
    display: grid;
    gap: 14px;
}

.dashboard-quick-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 247, 0.9));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-quick-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 95, 115, 0.28);
    box-shadow: 0 16px 28px rgba(0, 95, 115, 0.1);
}

.dashboard-quick-card strong {
    color: var(--brand-strong);
    font-size: 1.02rem;
}

.dashboard-quick-card span {
    color: var(--muted);
    line-height: 1.6;
}

.dashboard-modern-shell {
    display: grid;
    gap: 24px;
}

.dashboard-modern-hero {
    margin-bottom: 4px;
}

.dashboard-modern-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.82fr);
    gap: 22px;
    padding: 26px;
    border-radius: 34px;
    border: 1px solid rgba(231, 223, 209, 0.84);
    box-shadow: var(--shadow);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.18), transparent 30%),
        linear-gradient(135deg, #062f3d 0%, #0d5660 52%, #187165 100%);
    overflow: hidden;
}

.dashboard-modern-copy,
.dashboard-modern-summary {
    position: relative;
    z-index: 1;
}

.dashboard-modern-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 14px;
    color: #fff;
}

.dashboard-modern-pill {
    width: fit-content;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.dashboard-modern-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
}

.dashboard-modern-copy h3 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.4rem, 4vw, 4.5rem);
    line-height: 1.02;
}

.dashboard-modern-lead {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
    font-size: 1.05rem;
}

.dashboard-modern-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-modern-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.dashboard-modern-metric {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.dashboard-modern-metric span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.dashboard-modern-metric strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1.3;
}

.dashboard-modern-summary {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(242, 248, 246, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.54);
    box-shadow: 0 20px 40px rgba(6, 47, 61, 0.16);
}

.dashboard-modern-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-modern-spotlight,
.dashboard-modern-income,
.dashboard-modern-note-card {
    display: grid;
    gap: 8px;
}

.dashboard-modern-spotlight span,
.dashboard-modern-income span,
.dashboard-modern-signal-grid span {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.dashboard-modern-spotlight strong,
.dashboard-modern-income strong {
    color: var(--brand-strong);
    font-size: 1.55rem;
    line-height: 1.18;
}

.dashboard-modern-spotlight small,
.dashboard-modern-income small,
.dashboard-modern-note-card p {
    color: var(--muted);
    line-height: 1.7;
}

.dashboard-modern-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-modern-signal-grid div {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(231, 223, 209, 0.84);
}

.dashboard-modern-signal-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 1.5rem;
    color: var(--brand-strong);
}

.dashboard-modern-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-modern-stat {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(245, 249, 247, 0.92));
    animation: fadeInUp 0.45s ease both;
    animation-delay: calc(var(--delay) * 0.04s);
}

.dashboard-modern-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-modern-stat-head span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-modern-stat strong {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    color: var(--brand-strong);
}

.dashboard-modern-stat p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.dashboard-modern-stat-brand strong {
    color: var(--brand);
}

.dashboard-modern-stat-accent strong {
    color: var(--accent);
}

.dashboard-modern-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 56px;
}

.dashboard-modern-bars span {
    border-radius: 999px 999px 10px 10px;
    background: linear-gradient(180deg, rgba(0, 95, 115, 0.3), rgba(202, 103, 2, 0.58));
}

.dashboard-modern-bars span:nth-child(1) {
    height: 44%;
}

.dashboard-modern-bars span:nth-child(2) {
    height: 78%;
}

.dashboard-modern-bars span:nth-child(3) {
    height: 58%;
}

.dashboard-modern-bars span:nth-child(4) {
    height: 100%;
}

.dashboard-modern-grid,
.dashboard-modern-chart-grid,
.dashboard-modern-activity-layout {
    display: grid;
    gap: 20px;
}

.dashboard-modern-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.dashboard-modern-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-modern-chart-panel-wide {
    grid-column: 1 / -1;
}

.dashboard-modern-activity-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    align-items: start;
}

.dashboard-modern-panel {
    border-radius: 30px;
    overflow: hidden;
}

.dashboard-modern-panel-accent {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(255, 250, 242, 0.98), rgba(239, 247, 245, 0.96));
}

.dashboard-modern-panel-light {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 245, 240, 0.95));
}

.dashboard-modern-chart-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 246, 0.95));
}

.dashboard-modern-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-modern-panel-head h3,
.dashboard-modern-note-card h3 {
    margin: 10px 0 0;
    color: var(--brand-strong);
    font-size: 1.45rem;
    line-height: 1.24;
}

.dashboard-modern-inline-link {
    color: var(--brand);
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-modern-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-modern-quick-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(231, 223, 209, 0.9);
    background: rgba(255, 255, 255, 0.82);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-modern-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(38, 52, 56, 0.1);
    border-color: rgba(0, 95, 115, 0.18);
}

.dashboard-modern-quick-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-modern-quick-top span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-modern-quick-card strong {
    color: var(--brand-strong);
    font-size: 1.08rem;
}

.dashboard-modern-quick-card p,
.dashboard-modern-status-empty p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.dashboard-modern-status-list,
.dashboard-modern-activity-list,
.dashboard-modern-side-stack {
    display: grid;
    gap: 14px;
}

.dashboard-modern-status-item {
    display: grid;
    gap: 10px;
    padding: 16px 0;
}

.dashboard-modern-status-item + .dashboard-modern-status-item {
    border-top: 1px solid rgba(231, 223, 209, 0.9);
}

.dashboard-modern-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-modern-status-head strong {
    color: var(--brand-strong);
    font-size: 1rem;
}

.dashboard-modern-status-head span {
    color: var(--muted);
    font-size: 0.88rem;
}

.dashboard-modern-progress {
    width: 100%;
    height: 11px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
    overflow: hidden;
}

.dashboard-modern-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b6672 0%, #ca6702 100%);
    transform-origin: left;
    animation: dashboardFillTrack 0.9s ease both;
}

.dashboard-modern-finance-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b6672 0%, #0a525a 100%);
    transform-origin: left;
    animation: dashboardFillTrack 0.9s ease both;
}

.dashboard-modern-finance-fill.is-accent {
    background: linear-gradient(90deg, #e58b2a 0%, #ca6702 100%);
}

.dashboard-modern-finance-fill.is-neutral {
    background: linear-gradient(90deg, #8fa0aa 0%, #667783 100%);
}

.dashboard-modern-finance-value {
    text-align: right;
}

.dashboard-modern-status-empty {
    padding: 10px 0 4px;
}

.dashboard-modern-status-empty strong {
    color: var(--brand-strong);
}

.dashboard-modern-donut-layout {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.dashboard-modern-donut-card {
    display: flex;
    justify-content: center;
}

.dashboard-modern-donut {
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
    transform-origin: center;
    animation: dashboardDonutReveal 0.8s ease both;
}

.dashboard-modern-donut-center {
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 16px 28px rgba(38, 52, 56, 0.08);
    text-align: center;
    animation: fadeInUp 0.55s ease both;
    animation-delay: 0.16s;
}

.dashboard-modern-donut-center strong {
    display: block;
    color: var(--brand-strong);
    font-size: 1.9rem;
    line-height: 1;
}

.dashboard-modern-donut-center span,
.dashboard-modern-legend-item small,
.dashboard-modern-column-item small {
    color: var(--muted);
}

.dashboard-modern-donut-legend {
    display: grid;
    gap: 12px;
}

.dashboard-modern-legend-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(231, 223, 209, 0.9);
}

.dashboard-modern-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.dashboard-modern-legend-item strong {
    display: block;
    color: var(--brand-strong);
    font-size: 0.98rem;
}

.dashboard-modern-column-chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    min-height: 280px;
    padding-top: 8px;
}

.dashboard-modern-column-item {
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 10px;
    min-height: 240px;
}

.dashboard-modern-column-bar {
    width: min(72px, 100%);
    min-height: 18px;
    border-radius: 18px 18px 10px 10px;
    background: linear-gradient(180deg, #0d6a77 0%, #0a525a 100%);
    box-shadow: 0 12px 24px rgba(11, 102, 114, 0.16);
    transform-origin: bottom;
    animation: dashboardGrowBar 0.8s ease both;
}

.dashboard-modern-column-bar.is-accent {
    background: linear-gradient(180deg, #e58b2a 0%, #ca6702 100%);
    box-shadow: 0 12px 24px rgba(202, 103, 2, 0.16);
}

.dashboard-modern-column-bar.is-neutral {
    background: linear-gradient(180deg, #8fa0aa 0%, #667783 100%);
    box-shadow: 0 12px 24px rgba(102, 119, 131, 0.16);
}

.dashboard-modern-column-item strong {
    color: var(--brand-strong);
    font-size: 1.1rem;
    line-height: 1;
}

.dashboard-modern-column-item small {
    text-align: center;
    line-height: 1.4;
}

.dashboard-modern-finance-chart {
    display: grid;
    gap: 16px;
}

.dashboard-modern-finance-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.8fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
}

.dashboard-modern-finance-row + .dashboard-modern-finance-row {
    border-top: 1px solid rgba(231, 223, 209, 0.9);
}

.dashboard-modern-finance-copy strong,
.dashboard-modern-finance-value strong {
    color: var(--brand-strong);
}

.dashboard-modern-finance-copy span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.92rem;
}

.dashboard-modern-finance-track {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
    overflow: hidden;
}

.dashboard-modern-activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(231, 223, 209, 0.84);
    background: rgba(255, 255, 255, 0.82);
}

.dashboard-modern-activity-id {
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.1), rgba(202, 103, 2, 0.16));
    color: var(--brand-strong);
    font-weight: 800;
}

.dashboard-modern-activity-copy strong {
    display: block;
    color: var(--brand-strong);
    font-size: 1rem;
}

.dashboard-modern-activity-copy p {
    margin: 6px 0 0;
    color: var(--muted);
}

.dashboard-modern-activity-meta {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.dashboard-modern-activity-meta small {
    color: var(--muted);
    text-align: right;
}

.dashboard-modern-note-card {
    min-height: 100%;
}

.dashboard-modern-note-card-dark {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 24%),
        linear-gradient(145deg, #073b4c 0%, #0d5660 52%, #155f5d 100%);
    border-color: rgba(9, 73, 83, 0.16);
}

.dashboard-modern-note-card-dark h3,
.dashboard-modern-note-card-dark p {
    color: #fff;
}

.dashboard-modern-note-card-dark .showcase-pill {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

@keyframes dashboardDonutReveal {
    from {
        opacity: 0;
        transform: scale(0.84) rotate(-80deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes dashboardGrowBar {
    from {
        opacity: 0.35;
        transform: scaleY(0.08);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes dashboardFillTrack {
    from {
        opacity: 0.45;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.dashboard-neo-shell {
    display: grid;
    gap: 22px;
}

.dashboard-neo-hero,
.dashboard-neo-grid,
.dashboard-neo-metrics {
    display: grid;
    gap: 20px;
}

.dashboard-neo-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.78fr);
}

.dashboard-neo-hero-main {
    display: grid;
    gap: 22px;
    padding: 34px;
    border-radius: 34px;
    border: 1px solid rgba(231, 223, 209, 0.78);
    box-shadow: 0 26px 54px rgba(7, 40, 51, 0.12);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 22%),
        radial-gradient(circle at right 20%, rgba(241, 164, 75, 0.24), transparent 26%),
        linear-gradient(135deg, #051f2b 0%, #083845 44%, #0f5462 100%);
    overflow: hidden;
    position: relative;
}

.dashboard-neo-hero-main::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(6px);
}

.dashboard-neo-hero-main::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.dashboard-neo-hero-copy,
.dashboard-neo-hero-stats,
.dashboard-neo-hero-side {
    position: relative;
    z-index: 1;
}

.dashboard-neo-hero-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-neo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-neo-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.72fr);
    gap: 22px;
    align-items: stretch;
}

.dashboard-neo-hero-copy-compact {
    gap: 22px;
}

.dashboard-neo-hero-heading {
    display: grid;
    gap: 10px;
}

.dashboard-neo-hero-heading h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.8rem, 4.3vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
}

.dashboard-neo-hero-heading span {
    display: block;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.8;
}

.dashboard-neo-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 95, 115, 0.14);
    background: rgba(0, 95, 115, 0.08);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 800;
}

.dashboard-neo-inline-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.dashboard-neo-inline-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.dashboard-neo-inline-icon.is-light {
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-neo-inline-icon.is-outline {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
}

.dashboard-neo-inline-icon.is-panel {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(7, 59, 76, 0.08);
    color: var(--brand-strong);
}

.dashboard-neo-label-soft {
    background: rgba(255, 255, 255, 0.12);
    color: #f7f3ea;
    border-color: rgba(255, 255, 255, 0.14);
}

.dashboard-neo-hero-copy h3 {
    margin: 0 0 14px;
    max-width: 800px;
    color: #fff;
    font-size: clamp(2.8rem, 4.3vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.dashboard-neo-hero-copy p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    line-height: 1.95;
}

.dashboard-neo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.dashboard-neo-hero-strips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-neo-hero-strip {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(14px);
}

.dashboard-neo-strip-label {
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 800;
}

.dashboard-neo-hero-strip strong {
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.1;
}

.dashboard-neo-hero-strip small {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.55;
}

.dashboard-neo-strip-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.dashboard-neo-strip-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f1a44b 0%, #f7d27d 100%);
    transform-origin: left;
    animation: dashboardFillTrack 0.95s ease both;
}

.dashboard-neo-hero-board {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 22%),
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dashboard-neo-hero-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-neo-hero-board-kicker {
    color: rgba(255, 255, 255, 0.74);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 800;
}

.dashboard-neo-hero-board-grid {
    display: grid;
    gap: 12px;
}

.dashboard-neo-hero-board-card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeInUp 0.45s ease both;
    animation-delay: calc(var(--hero-stat-delay, 1) * 0.05s);
    text-align: center;
}

.dashboard-neo-hero-board-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.dashboard-neo-hero-board-card strong {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.25;
}

.dashboard-neo-hero-side {
    display: grid;
    gap: 18px;
}

.dashboard-neo-side-card {
    padding: 24px;
    border-radius: 30px;
    border: 1px solid rgba(231, 223, 209, 0.84);
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(244, 248, 246, 0.94));
}

.dashboard-neo-side-card-primary {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(145deg, #fff7ed 0%, #eef6f4 100%);
}

.dashboard-neo-side-card-secondary {
    background:
        radial-gradient(circle at bottom right, rgba(202, 103, 2, 0.18), transparent 22%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 239, 0.94));
}

.dashboard-neo-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-neo-side-kicker {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-neo-side-card > strong {
    display: block;
    margin-top: 10px;
    color: var(--brand-strong);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1.04;
}

.dashboard-neo-side-card p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.75;
}

.dashboard-neo-side-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.dashboard-neo-side-meta div {
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(231, 223, 209, 0.84);
    text-align: center;
}

.dashboard-neo-side-meta span {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
}

.dashboard-neo-side-meta strong {
    display: block;
    margin-top: 8px;
    color: var(--brand-strong);
    font-size: 1.4rem;
}

.dashboard-neo-side-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.dashboard-neo-side-period div {
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(231, 223, 209, 0.82);
    text-align: center;
}

.dashboard-neo-side-period span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
}

.dashboard-neo-side-period strong {
    display: block;
    margin-top: 8px;
    color: var(--brand-strong);
    font-size: 1.28rem;
}

.dashboard-neo-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-neo-metric-card {
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(246, 249, 247, 0.92));
    box-shadow: var(--shadow-soft);
    animation: fadeInUp 0.45s ease both;
    animation-delay: calc(var(--metric-delay) * 0.04s);
}

.dashboard-neo-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-neo-metric-head span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-neo-icon-chip {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.16), rgba(202, 103, 2, 0.22));
    border: 1px solid rgba(0, 95, 115, 0.14);
    color: var(--brand-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dashboard-neo-icon-chip svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.dashboard-neo-metric-card strong {
    display: block;
    margin-top: 18px;
    color: var(--brand-strong);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    text-align: center;
}

.dashboard-neo-metric-card p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.dashboard-neo-metric-brand strong {
    color: var(--brand);
}

.dashboard-neo-metric-accent strong {
    color: var(--accent);
}

.dashboard-neo-grid-main {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
}

.dashboard-neo-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-neo-grid-tertiary {
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}

.dashboard-neo-panel {
    border-radius: 32px;
    padding: 26px;
    border: 1px solid rgba(231, 223, 209, 0.9);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.dashboard-neo-panel-dark {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(145deg, #082f3a 0%, #0c4652 56%, #135763 100%);
    color: #fff;
    border-color: rgba(8, 61, 74, 0.14);
}

.dashboard-neo-panel-soft {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(244, 248, 246, 0.94));
}

.dashboard-neo-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.dashboard-neo-panel-head h3 {
    margin: 10px 0 0;
    color: var(--brand-strong);
    font-size: 1.5rem;
    line-height: 1.2;
}

.dashboard-neo-panel-dark .dashboard-neo-panel-head h3 {
    color: #fff;
}

.dashboard-neo-head-note {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.dashboard-neo-head-note span {
    color: var(--muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.dashboard-neo-panel-dark .dashboard-neo-head-note span {
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-neo-head-note strong {
    color: var(--brand-strong);
    font-size: 1rem;
}

.dashboard-neo-panel-dark .dashboard-neo-head-note strong {
    color: #fff;
}

.dashboard-neo-trend-card {
    display: grid;
    gap: 18px;
}

.dashboard-neo-trend-svg {
    width: 100%;
    height: auto;
    display: block;
}

.dashboard-neo-grid-line {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    stroke-dasharray: 6 10;
}

.dashboard-neo-trend-area {
    animation: dashboardNeoFadeArea 1s ease both;
}

.dashboard-neo-trend-line {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: dashboardNeoDrawLine 1.3s ease forwards;
}

.dashboard-neo-trend-dot {
    fill: #fff7e7;
    stroke: #f1a44b;
    stroke-width: 4;
    opacity: 0;
    animation: dashboardNeoShowDots 0.4s ease forwards;
    animation-delay: 1s;
}

.dashboard-neo-axis-label {
    fill: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    font-weight: 700;
}

.dashboard-neo-trend-summary {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-neo-trend-day {
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-neo-trend-day span {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.dashboard-neo-trend-day strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 1.2rem;
}

.dashboard-neo-donut-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.dashboard-neo-donut-card {
    display: flex;
    justify-content: center;
}

.dashboard-neo-donut-ring {
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 18px 36px rgba(7, 40, 51, 0.08);
    animation: dashboardDonutReveal 0.8s ease both;
}

.dashboard-neo-donut-core {
    width: 136px;
    height: 136px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 30px rgba(38, 52, 56, 0.08);
    text-align: center;
}

.dashboard-neo-donut-core span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 800;
}

.dashboard-neo-donut-core strong {
    display: block;
    margin-top: 8px;
    color: var(--brand-strong);
    font-size: 2rem;
}

.dashboard-neo-donut-legend,
.dashboard-neo-finance-stack,
.dashboard-neo-comparison-list,
.dashboard-neo-activity-list {
    display: grid;
    gap: 12px;
}

.dashboard-neo-legend-card {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(231, 223, 209, 0.88);
    background: rgba(255, 255, 255, 0.72);
}

.dashboard-neo-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.dashboard-neo-legend-card strong {
    display: block;
    color: var(--brand-strong);
}

.dashboard-neo-legend-card small,
.dashboard-neo-empty-state p,
.dashboard-neo-comparison-copy span,
.dashboard-neo-finance-card p,
.dashboard-neo-quick-card p,
.dashboard-neo-activity-copy p,
.dashboard-neo-activity-meta small {
    color: var(--muted);
}

.dashboard-neo-empty-state strong {
    color: var(--brand-strong);
}

.dashboard-neo-empty-state p {
    margin: 8px 0 0;
    line-height: 1.7;
}

.dashboard-neo-comparison-row {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    animation: fadeInUp 0.45s ease both;
    animation-delay: calc(var(--row-delay) * 0.05s);
}

.dashboard-neo-comparison-row + .dashboard-neo-comparison-row {
    border-top: 1px solid rgba(231, 223, 209, 0.9);
}

.dashboard-neo-comparison-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-neo-comparison-copy strong,
.dashboard-neo-finance-head strong,
.dashboard-neo-quick-card strong,
.dashboard-neo-activity-copy strong {
    color: var(--brand-strong);
}

.dashboard-neo-bar-track,
.dashboard-neo-finance-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
    overflow: hidden;
}

.dashboard-neo-bar,
.dashboard-neo-finance-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transform-origin: left;
    animation: dashboardFillTrack 0.9s ease both;
}

.dashboard-neo-bar {
    background: linear-gradient(90deg, #0f6877 0%, #0a4f58 100%);
}

.dashboard-neo-bar.is-accent,
.dashboard-neo-finance-fill.is-accent {
    background: linear-gradient(90deg, #dd8a31 0%, #ca6702 100%);
}

.dashboard-neo-bar.is-neutral,
.dashboard-neo-finance-fill.is-neutral {
    background: linear-gradient(90deg, #8ea0aa 0%, #647684 100%);
}

.dashboard-neo-finance-fill {
    background: linear-gradient(90deg, #1f7a8c 0%, #0a525a 100%);
}

.dashboard-neo-finance-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(231, 223, 209, 0.88);
    background: rgba(255, 255, 255, 0.72);
    animation: fadeInUp 0.45s ease both;
    animation-delay: calc(var(--finance-delay) * 0.05s);
}

.dashboard-neo-finance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-neo-finance-head span {
    color: var(--brand-strong);
    font-weight: 800;
}

.dashboard-neo-finance-card p {
    margin: 10px 0 14px;
    line-height: 1.7;
}

.dashboard-neo-inline-link {
    color: var(--brand);
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-neo-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-neo-quick-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(231, 223, 209, 0.9);
    background: rgba(255, 255, 255, 0.78);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-neo-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(38, 52, 56, 0.1);
    border-color: rgba(0, 95, 115, 0.16);
}

.dashboard-neo-quick-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-neo-quick-top span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-neo-quick-card strong {
    display: block;
    margin-top: 12px;
    font-size: 1.04rem;
}

.dashboard-neo-quick-card p {
    margin: 8px 0 0;
    line-height: 1.7;
}

.dashboard-neo-activity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(231, 223, 209, 0.88);
    background: rgba(255, 255, 255, 0.76);
}

.dashboard-neo-activity-pill {
    min-width: 64px;
    padding: 12px 10px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.1), rgba(202, 103, 2, 0.16));
    color: var(--brand-strong);
    font-weight: 800;
}

.dashboard-neo-activity-copy p {
    margin: 6px 0 0;
}

.dashboard-neo-activity-meta {
    display: grid;
    justify-items: end;
    gap: 8px;
}

@keyframes dashboardNeoDrawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dashboardNeoFadeArea {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboardNeoShowDots {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
    gap: 20px;
    margin-bottom: 22px;
}

.portal-hero-main,
.portal-profile-card {
    border-radius: 26px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.portal-hero-main {
    padding: 30px;
    color: #fff;
}

.student-portal-hero .portal-hero-main {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(135deg, #0c5960 0%, #1a6e63 52%, #ca6702 130%);
}

.teacher-portal-hero .portal-hero-main {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(135deg, #073b4c 0%, #0d4f63 48%, #1b5f86 100%);
}

.portal-hero-main h3 {
    margin: 0;
    font-size: clamp(1.95rem, 3vw, 3rem);
    line-height: 1.08;
}

.portal-hero-main > p:last-of-type {
    margin: 18px 0 0;
    max-width: 760px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.portal-profile-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(246, 249, 247, 0.9));
}

.portal-profile-card strong {
    font-size: 1.6rem;
    color: var(--brand-strong);
}

.portal-profile-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.portal-profile-card p strong {
    font-size: 0.98rem;
    color: var(--ink);
}

.teacher-profile-card {
    gap: 18px;
}

.teacher-profile-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.teacher-profile-head strong {
    display: block;
    margin-top: 8px;
}

.teacher-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-profile-grid p {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(231, 223, 209, 0.92);
}

.teacher-profile-grid p strong {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.teacher-profile-grid p span {
    color: var(--brand-strong);
    font-weight: 700;
    line-height: 1.45;
}

.teacher-profile-grid .teacher-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.teacher-profile-grid .teacher-profile-email-card {
    grid-column: 1 / -1;
    text-align: center;
}

.teacher-dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-stat-card {
    text-align: center;
    align-items: stretch;
    justify-items: stretch;
    min-height: 220px;
}

.teacher-stat-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.teacher-stat-card .icon-chip {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-chip-svg svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.teacher-stat-card p,
.teacher-stat-card strong,
.teacher-stat-card span {
    text-align: center;
}

.teacher-stat-card p {
    text-align: left;
    margin: 0;
}

.teacher-stat-card strong {
    width: 100%;
}

.teacher-dashboard-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.teacher-dashboard-panel {
    min-height: 100%;
}

.teacher-gradebook-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.teacher-gradebook-panel-primary,
.teacher-gradebook-panel-secondary {
    min-width: 0;
}

.teacher-gradebook-panel-primary .table-wrap,
.teacher-gradebook-panel-secondary .table-wrap {
    width: 100%;
}

.teacher-gradebook-panel-primary .grades-entry-table,
.teacher-gradebook-panel-secondary .grades-entry-table {
    min-width: 760px;
}

.teacher-gradebook-panel-primary .grade-input,
.teacher-gradebook-panel-primary .grade-average {
    min-width: 92px;
    text-align: center;
}

.student-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.student-metric-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(32, 102, 113, 0.15);
    background:
        radial-gradient(circle at top right, rgba(32, 102, 113, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(225, 242, 245, 0.96));
    box-shadow: 0 22px 40px rgba(32, 102, 113, 0.06);
    overflow: hidden;
}

.student-metric-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
}

.student-metric-card.brand::after {
    background: linear-gradient(90deg, rgba(32, 102, 113, 0.9), rgba(45, 138, 159, 0.7));
}

.student-metric-card.accent::after {
    background: linear-gradient(90deg, rgba(22, 74, 87, 0.92), rgba(32, 102, 113, 0.65));
}

.student-metric-card.neutral::after {
    background: linear-gradient(90deg, rgba(32, 102, 113, 0.85), rgba(45, 138, 159, 0.55));
}

.student-metric-top,
.student-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.student-metric-top {
    align-items: center;
}

.student-metric-chip,
.student-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.student-metric-chip svg {
    width: 22px;
    height: 22px;
    display: block;
}

.student-metric-card.brand .student-metric-chip,
.student-quick-card:nth-child(1) .student-quick-icon,
.student-quick-card:nth-child(4) .student-quick-icon {
    background: rgba(32, 102, 113, 0.12);
    color: var(--professional-blue);
}

.student-metric-card.accent .student-metric-chip,
.student-quick-card:nth-child(2) .student-quick-icon {
    background: rgba(32, 102, 113, 0.12);
    color: var(--professional-blue);
}

.student-metric-card.neutral .student-metric-chip,
.student-quick-card:nth-child(3) .student-quick-icon {
    background: rgba(32, 102, 113, 0.12);
    color: var(--professional-blue);
}

.student-metric-eyebrow,
.student-panel-head span,
.student-quick-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
}

.student-metric-eyebrow {
    color: var(--muted);
}

.student-metric-card p {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}

.student-metric-card strong {
    display: block;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 0.95;
    color: var(--professional-blue-dark);
    text-align: center;
}

.student-metric-card span:last-child {
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.93rem;
}

.student-portal-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 20px;
    margin-bottom: 22px;
}

.student-portal-main,
.student-portal-profile,
.student-dashboard-panel {
    border-radius: 30px;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.student-portal-main {
    position: relative;
    overflow: hidden;
    padding: 32px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(135deg, #0a4c5b 0%, #0d5e69 52%, #c96700 120%);
}

.student-portal-main::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -50px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.student-portal-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 800;
}

.student-portal-main h3 {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    max-width: 690px;
    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.student-portal-main > p {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    max-width: 700px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
    font-size: 1.08rem;
}

.student-portal-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.student-portal-microstats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.student-portal-microstats div {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.student-portal-microstats span {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 800;
}

.student-portal-microstats strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.2;
}

.student-portal-profile {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 246, 0.94));
}

.student-portal-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-portal-avatar {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.12), rgba(202, 103, 2, 0.18));
    border: 1px solid rgba(0, 95, 115, 0.14);
    color: var(--brand-strong);
    font-weight: 800;
    font-size: 1.2rem;
}

.student-portal-profile-head strong {
    display: block;
    margin-top: 8px;
    color: var(--brand-strong);
    font-size: 1.6rem;
    line-height: 1.2;
}

.student-portal-list {
    display: grid;
    gap: 12px;
}

.student-portal-list div {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(231, 223, 209, 0.9);
}

.student-portal-list span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.student-portal-list strong {
    color: var(--brand-strong);
    font-size: 1.02rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.student-portal-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.student-portal-panel-grid .student-quick-card {
    text-decoration: none;
    color: inherit;
}

.student-progress-list {
    display: grid;
    gap: 14px;
}

.student-progress-item {
    display: grid;
    gap: 8px;
}

.student-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-progress-row strong {
    color: var(--brand-strong);
    font-size: 1rem;
}

.student-progress-row span {
    color: var(--brand);
    font-weight: 800;
}

.student-progress-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 95, 115, 0.08);
}

.student-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0a5a68 0%, #d97706 100%);
}

.student-empty-state {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.student-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.18fr);
    gap: 20px;
    align-items: start;
}

.student-dashboard-stack {
    display: grid;
    gap: 20px;
}

.student-dashboard-panel {
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 249, 0.95));
    border: 1px solid rgba(221, 230, 232, 0.9);
    box-shadow: 0 22px 42px rgba(18, 45, 54, 0.08);
}

.student-panel-head {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(223, 231, 232, 0.9);
}

.student-panel-head h3 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    color: var(--brand-strong);
}

.student-panel-head span {
    color: var(--brand);
}

.student-period-badge,
.student-code-pill,
.student-grade-pill,
.student-inline-muted,
.student-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 700;
}

.student-period-badge {
    padding: 9px 14px;
    background: rgba(0, 95, 115, 0.08);
    color: var(--brand);
    font-size: 0.82rem;
}

.student-quick-grid {
    display: grid;
    gap: 14px;
}

.student-quick-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(222, 231, 232, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 247, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.student-quick-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 95, 115, 0.22);
    box-shadow: 0 20px 34px rgba(0, 95, 115, 0.1);
}

.student-quick-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-quick-kicker {
    color: var(--muted);
}

.student-quick-card strong {
    color: var(--brand-strong);
    font-size: 1.05rem;
}

.student-quick-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.student-quick-action {
    padding: 8px 0 0;
    color: var(--brand);
    font-size: 0.9rem;
    justify-content: flex-start;
}

.student-table-shell {
    display: grid;
    gap: 10px;
}

.student-table-wrap {
    border-radius: 22px;
    border: 1px solid rgba(223, 231, 232, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 248, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.student-table-wrap table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.student-table-wrap thead th {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(223, 231, 232, 0.9);
    background: rgba(245, 248, 248, 0.92);
    color: var(--brand-strong);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-table-wrap tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(236, 241, 242, 0.96);
    vertical-align: middle;
}

.student-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.student-table-wrap tbody tr:hover td {
    background: rgba(247, 251, 250, 0.88);
}

.student-grade-pill {
    min-width: 58px;
    padding: 7px 12px;
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.12), rgba(10, 147, 150, 0.18));
    color: var(--brand-strong);
}

.student-code-pill {
    padding: 7px 12px;
    background: rgba(31, 67, 76, 0.08);
    color: var(--brand-strong);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.student-inline-action {
    padding: 10px 14px;
    border-radius: 12px;
}

.student-inline-muted {
    padding: 7px 12px;
    background: rgba(120, 133, 138, 0.1);
    color: var(--muted);
    font-size: 0.84rem;
}

.classroom-shell {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.classroom-main {
    display: grid;
    gap: 20px;
}

.classroom-side-panel {
    position: sticky;
    top: 24px;
}

.classroom-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 18px;
}

.classroom-shell h3,
.classroom-shell h4,
.classroom-shell label,
.classroom-shell .dashboard-kicker,
.classroom-shell .classroom-week-kicker,
.classroom-shell .course-card-pill,
.classroom-shell .badge {
    text-transform: uppercase;
}

.classroom-shell label,
.classroom-form-card label,
.classroom-form-card input,
.classroom-form-card textarea,
.classroom-form-card select,
.classroom-form-card option {
    color: #0b2d4d;
}

.classroom-shell .helper,
.classroom-shell p.helper {
    color: #ffffff;
}

.classroom-shell .helper.empty-week,
.classroom-shell p.helper.empty-week,
.classroom-week-group .helper,
.classroom-week-group p.helper {
    color: #0b2d4d;
}

.classroom-hero-main,
.classroom-summary-grid,
.classroom-summary-card {
    border-radius: 26px;
}

.classroom-hero-main {
    padding: 28px;
    color: #fff;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.student-classroom-hero .classroom-hero-main {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(135deg, #0f5d63 0%, #1f6f67 54%, #ca6702 130%);
}

.teacher-classroom-hero .classroom-hero-main {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 24%),
        linear-gradient(135deg, #073b4c 0%, #0f5b64 52%, #12587b 100%);
}

.teacher-classroom-shell .classroom-summary-grid {
    align-content: center;
}

.teacher-classroom-shell .classroom-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    text-align: center;
}

.teacher-course-browser {
    display: grid;
    gap: 22px;
}

.teacher-course-browser-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 18px;
    padding: 28px;
    border-radius: 30px;
    color: #fff;
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(135deg, #073b4c 0%, #0f5b64 52%, #12587b 100%);
}

.teacher-course-browser-hero h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.08;
}

.teacher-course-browser-hero p:last-child {
    margin: 16px 0 0;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.teacher-course-browser-stats {
    display: grid;
    gap: 14px;
    align-content: center;
}

.teacher-course-browser-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

.teacher-course-browser-stat span {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.teacher-course-browser-stat strong {
    display: block;
    margin-top: 10px;
    font-size: 1.5rem;
    line-height: 1.2;
}

.teacher-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-course-tile {
    display: grid;
    gap: 10px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    text-decoration: none;
    background:
        radial-gradient(circle at top right, rgba(18, 88, 123, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 248, 0.95));
    border: 1px solid rgba(206, 220, 224, 0.95);
    box-shadow: 0 18px 38px rgba(10, 45, 55, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@media (max-width: 1100px) {
    .teacher-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .teacher-course-grid {
        grid-template-columns: 1fr;
    }
}

.teacher-course-tile::after {
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
    opacity: 0.7;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.teacher-course-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #0f5b64 0%, #1a7f86 45%, #d97706 100%);
}

.teacher-course-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 42px rgba(8, 47, 57, 0.16);
    border-color: rgba(15, 91, 100, 0.26);
}

.teacher-course-tile:hover::after {
    transform: scale(1.08);
    opacity: 0.95;
}

.teacher-course-tile.is-ocean {
    background:
        radial-gradient(circle at top right, rgba(18, 88, 123, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(242, 248, 249, 0.95));
}

.teacher-course-tile.is-ocean::before {
    background: linear-gradient(90deg, #0f5b64 0%, #1a7f86 45%, #d97706 100%);
}

.teacher-course-tile.is-amber {
    background:
        radial-gradient(circle at top right, rgba(217, 119, 6, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(255, 251, 245, 0.99), rgba(250, 246, 239, 0.95));
}

.teacher-course-tile.is-amber::before {
    background: linear-gradient(90deg, #b45309 0%, #d97706 48%, #0f766e 100%);
}

.teacher-course-tile.is-emerald {
    background:
        radial-gradient(circle at top right, rgba(22, 163, 74, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(248, 255, 251, 0.99), rgba(240, 250, 245, 0.95));
}

.teacher-course-tile.is-emerald::before {
    background: linear-gradient(90deg, #15803d 0%, #16a34a 45%, #0f5b64 100%);
}

.teacher-course-tile.is-slate {
    background:
        radial-gradient(circle at top right, rgba(71, 85, 105, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(242, 246, 251, 0.95));
}

.teacher-course-tile.is-slate::before {
    background: linear-gradient(90deg, #334155 0%, #475569 45%, #0f5b64 100%);
}

.teacher-course-tile-top,
.teacher-course-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.teacher-course-tile-arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(15, 91, 100, 0.12), rgba(217, 119, 6, 0.14));
    color: var(--brand-strong);
    font-size: 0.95rem;
    font-weight: 900;
}

.teacher-course-tile-body {
    display: grid;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.teacher-course-tile-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.56));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 18px rgba(10, 45, 55, 0.08);
}

.teacher-course-tile-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.teacher-course-tile.is-ocean .teacher-course-tile-icon,
.teacher-course-tile.is-ocean .teacher-course-tile-arrow {
    color: #0f5b64;
}

.teacher-course-tile.is-amber .teacher-course-tile-icon,
.teacher-course-tile.is-amber .teacher-course-tile-arrow {
    color: #b45309;
}

.teacher-course-tile.is-emerald .teacher-course-tile-icon,
.teacher-course-tile.is-emerald .teacher-course-tile-arrow {
    color: #15803d;
}

.teacher-course-tile.is-slate .teacher-course-tile-icon,
.teacher-course-tile.is-slate .teacher-course-tile-arrow {
    color: #334155;
}

.teacher-course-tile strong {
    color: var(--brand-strong);
    font-size: 1rem;
    line-height: 1.3;
}

.teacher-course-tile p {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
}

.teacher-course-tile small {
    color: #0f5b64;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.teacher-course-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.teacher-course-tile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(36, 76, 86, 0.08);
    color: var(--brand-strong);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid rgba(15, 91, 100, 0.08);
}

.teacher-course-tile-meta span svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex: 0 0 12px;
}

.teacher-course-tile .course-card-pill {
    background: rgba(15, 91, 100, 0.1);
    color: #0b4b56;
}

.teacher-course-tile .course-card-pill.is-active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.teacher-course-tile .course-card-pill.is-inactive {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.teacher-course-tile-footer {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 223, 226, 0.88);
    position: relative;
    z-index: 1;
}

.teacher-classroom-back {
    width: 100%;
    margin-bottom: 14px;
}

.teacher-classroom-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.teacher-classroom-shell .button-link,
.teacher-classroom-shell button {
    background: #0b3d4a;
    color: #fff;
    box-shadow: 0 12px 22px rgba(11, 61, 74, 0.2);
    text-transform: capitalize;
}

.teacher-classroom-shell .button-link:hover,
.teacher-classroom-shell button:hover {
    background: #082f39;
    box-shadow: 0 14px 26px rgba(8, 47, 57, 0.26);
}

.teacher-classroom-shell .button-secondary,
.teacher-classroom-shell .button-danger {
    background: #143946;
    color: #fff;
    box-shadow: 0 12px 22px rgba(20, 57, 70, 0.2);
}

.teacher-classroom-shell .button-secondary:hover,
.teacher-classroom-shell .button-danger:hover {
    background: #0e2c36;
    color: #fff;
    box-shadow: 0 14px 26px rgba(14, 44, 54, 0.26);
}

.teacher-classroom-shell .table-wrap {
    margin-top: 20px;
}

.teacher-classroom-shell-full {
    grid-template-columns: minmax(0, 1fr);
}

.classroom-hero-main h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.08;
}

.classroom-hero-main > p:last-of-type {
    margin: 16px 0 0;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.classroom-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.classroom-hero-meta span,
.course-card-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.classroom-hero-meta span {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.classroom-summary-grid {
    display: grid;
    gap: 14px;
}

.classroom-summary-card {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(246, 249, 247, 0.9));
    border: 1px solid rgba(231, 223, 209, 0.92);
    box-shadow: var(--shadow);
}

.classroom-summary-card p {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--accent);
}

.classroom-summary-card strong {
    display: block;
    margin-top: 10px;
    font-size: 2rem;
    color: var(--brand-strong);
}

.classroom-section {
    padding: 24px;
}

.teacher-classroom-shell .classroom-section-head.is-centered {
    text-align: center;
}

.teacher-classroom-shell .classroom-section-head.is-centered h3 {
    margin: 0;
}

.classroom-materials-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.classroom-resource-card {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 247, 0.9));
}

.classroom-resource-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.classroom-resource-card .showcase-pill {
    margin-bottom: 4px;
}

.classroom-icon-chip {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(0, 95, 115, 0.12);
    color: var(--brand-strong);
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.1), rgba(202, 103, 2, 0.14));
}

.classroom-icon-chip.is-pdf {
    color: #b42318;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.12), rgba(255, 224, 178, 0.26));
    border-color: rgba(180, 35, 24, 0.16);
}

.classroom-icon-chip.is-video {
    color: #155eef;
    background: linear-gradient(135deg, rgba(21, 94, 239, 0.12), rgba(191, 219, 254, 0.3));
    border-color: rgba(21, 94, 239, 0.16);
}

.classroom-icon-chip svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.classroom-icon-chip.is-pdf svg text {
    fill: #fff;
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 0;
}

.classroom-resource-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.classroom-resource-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
}

.classroom-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.classroom-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.06);
    color: var(--brand-strong);
    font-size: 0.83rem;
    font-weight: 600;
}

.classroom-card-meta-tight {
    margin-top: 12px;
    margin-bottom: 12px;
}

.classroom-download-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 14px;
}

.classroom-download-row-end {
    justify-content: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.classroom-activity-stack {
    display: grid;
    gap: 18px;
}

.classroom-activity-card {
    padding: 26px;
    border-radius: 28px;
    border: 1px solid rgba(0, 95, 115, 0.14);
    background: radial-gradient(circle at top right, rgba(202, 103, 2, 0.12), transparent 34%), linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(255, 255, 255, 0.94));
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.classroom-activity-head {
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.classroom-activity-title {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.classroom-activity-title > div {
    flex: 1 1 auto;
}

.classroom-activity-kickers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    width: 100%;
}

.classroom-activity-kickers > .badge:first-child {
    justify-self: start;
}

.classroom-activity-close-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
}

.classroom-activity-kicker-ghost {
    visibility: hidden;
    pointer-events: none;
    justify-self: end;
}

.classroom-activity-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--brand-strong);
    background: linear-gradient(135deg, rgba(0, 95, 115, 0.12), rgba(202, 103, 2, 0.16));
    border: 1px solid rgba(0, 95, 115, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.classroom-activity-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.classroom-activity-icon-forum {
    color: #8e4b10;
    background: linear-gradient(135deg, rgba(202, 103, 2, 0.14), rgba(255, 236, 179, 0.42));
}

.classroom-activity-icon-quiz {
    color: #155eef;
    background: linear-gradient(135deg, rgba(21, 94, 239, 0.12), rgba(191, 219, 254, 0.34));
}

.classroom-activity-icon-upload {
    color: #087443;
    background: linear-gradient(135deg, rgba(42, 157, 143, 0.14), rgba(209, 250, 229, 0.4));
}

.classroom-due-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(0, 95, 115, 0.12);
    background: rgba(0, 95, 115, 0.06);
    color: var(--brand-strong);
    text-align: center;
}

.classroom-due-badge.is-overdue {
    color: #b42318;
    background: rgba(254, 226, 226, 0.9);
    border-color: rgba(180, 35, 24, 0.18);
}

.classroom-due-badge.is-today {
    color: #087443;
    background: rgba(220, 252, 231, 0.92);
    border-color: rgba(8, 116, 67, 0.18);
}

.classroom-due-badge.is-soon {
    color: #087443;
    background: rgba(220, 252, 231, 0.92);
    border-color: rgba(8, 116, 67, 0.18);
}

.classroom-due-badge.is-scheduled,
.classroom-due-badge.is-open {
    color: #087443;
    background: rgba(220, 252, 231, 0.92);
    border-color: rgba(8, 116, 67, 0.18);
}

.classroom-activity-meta-grid {
    min-width: 180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.classroom-activity-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(0, 95, 115, 0.1);
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.classroom-activity-stat strong {
    font-size: 1rem;
    color: var(--text);
}

.classroom-activity-stat small {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--muted);
}

.classroom-activity-description {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.classroom-activity-description p {
    margin: 0;
    line-height: 1.7;
    color: #334155;
}

.classroom-activity-brief {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.classroom-grade-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.classroom-activity-brief span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.73rem;
    font-weight: 800;
    color: var(--brand);
}

.classroom-activity-brief a {
    color: var(--brand-strong);
    font-weight: 700;
}

.classroom-activity-resource {
    min-width: 190px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 95, 115, 0.1);
}

.classroom-activity-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}

.classroom-file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-strong);
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.classroom-file-link svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
    flex: 0 0 auto;
}

.classroom-file-link-icon {
    gap: 12px;
    color: #b42318;
    transition: transform 0.18s ease, color 0.18s ease;
}

.classroom-file-link-icon:hover,
.classroom-file-link-icon:focus-visible {
    transform: translateY(-1px);
    color: #8f1d12;
}

.classroom-file-link.classroom-activity-resource span {
    color: var(--brand-strong);
}

.classroom-delivery-toggle {
    position: relative;
}

.classroom-delivery-toggle summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #005f73, #0a6f86);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 14px 24px rgba(0, 95, 115, 0.18);
}

.classroom-delivery-toggle summary::-webkit-details-marker {
    display: none;
}

.classroom-delivery-toggle[open] summary {
    background: linear-gradient(135deg, #0b4f61, #005f73);
}

.classroom-delivery-form {
    width: min(460px, 100%);
    margin-top: 14px;
}

.submission-status-card {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, rgba(247, 250, 251, 0.98), rgba(240, 246, 247, 0.96));
}

.submission-status-card h4 {
    margin: 0;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #5f6f77, #73848c);
    letter-spacing: 0.02em;
}

.submission-status-grid {
    display: grid;
    gap: 0;
    margin-top: 0;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    background: #fff;
}

.submission-status-row {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
}

.submission-status-row + .submission-status-row {
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.submission-status-row:nth-child(even) .submission-status-label {
    background: #e5eef2;
}

.submission-status-row:nth-child(even) .submission-status-value {
    background: #f8fbfc;
}

.submission-status-label {
    padding: 12px 14px;
    background: #eef4f7;
    color: #244c56;
    font-weight: 800;
    border-right: 1px solid rgba(226, 232, 240, 0.95);
}

.submission-status-value {
    padding: 12px 14px;
    color: var(--ink);
    background: #ffffff;
}

.submission-status-comment {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.submission-status-value-highlight {
    font-weight: 800;
}

.submission-status-value-info {
    color: #155eef;
}

.submission-status-value-success {
    color: #087443;
}

.submission-status-value-muted {
    color: #8a5a00;
}

@media (max-width: 860px) {
    .classroom-activity-head {
        gap: 14px;
    }

    .classroom-activity-meta-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .classroom-activity-brief,
    .classroom-download-row-end {
        justify-content: flex-start;
    }

    .classroom-activity-actions {
        margin-left: 0;
    }

    .submission-status-grid {
        gap: 10px;
        border: 0;
        background: transparent;
        margin-top: 12px;
    }

    .submission-status-row {
        grid-template-columns: 1fr;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 12px;
        overflow: hidden;
    }

    .submission-status-row + .submission-status-row {
        border-top: 1px solid rgba(226, 232, 240, 0.95);
    }

    .submission-status-label {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    }

    .submission-status-card h4 {
        border-radius: 12px;
    }
}

@media (max-width: 640px) {
    .classroom-activity-card {
        padding: 20px;
        border-radius: 22px;
    }

    .classroom-activity-kickers {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .classroom-activity-close-inline,
    .classroom-activity-kicker-ghost {
        grid-column: auto;
        justify-self: start;
    }

    .classroom-activity-meta-grid {
        grid-template-columns: 1fr;
    }

    .classroom-activity-resource,
    .classroom-activity-actions {
        width: 100%;
    }
}

.classroom-file-link-icon svg {
    width: 56px;
    height: 56px;
    fill: currentColor;
}

.classroom-file-link-icon svg text {
    fill: #fff7f5;
    font-size: 4.4px;
    font-weight: 900;
    letter-spacing: 0.5px;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}

.classroom-file-link-icon span {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.classroom-file-link.classroom-file-link-pdf,
.classroom-file-link.classroom-file-link-pdf svg,
.classroom-file-link.classroom-file-link-pdf path,
.classroom-file-link.classroom-file-link-pdf rect {
    color: #b42318 !important;
    fill: #b42318;
}

.classroom-file-link.classroom-file-link-pdf:hover,
.classroom-file-link.classroom-file-link-pdf:focus-visible,
.classroom-file-link.classroom-file-link-pdf:hover svg,
.classroom-file-link.classroom-file-link-pdf:focus-visible svg,
.classroom-file-link.classroom-file-link-pdf:hover path,
.classroom-file-link.classroom-file-link-pdf:focus-visible path,
.classroom-file-link.classroom-file-link-pdf:hover rect,
.classroom-file-link.classroom-file-link-pdf:focus-visible rect {
    color: #8f1d12 !important;
    fill: #8f1d12;
}

.student-syllabus-download {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: 0;
}

.student-syllabus-download svg {
    display: block;
    width: 120px;
    height: 120px;
    margin-inline: auto;
}

.student-syllabus-download span {
    letter-spacing: 0;
}

.classroom-grade-row-form {
    display: none;
}

.classroom-grade-table th,
.classroom-grade-table td {
    text-align: center;
    vertical-align: middle;
}

.classroom-grade-table textarea {
    margin-inline: auto;
}

.classroom-grade-input {
    width: 58px;
    min-width: 58px;
    padding-inline: 6px;
    text-align: center;
}

.classroom-grade-feedback {
    min-height: 78px;
    margin-bottom: 10px;
}

.classroom-grade-message {
    max-width: 340px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;
    color: var(--ink);
}

.classroom-grade-file-icon {
    justify-content: center;
}

.classroom-grade-file-icon svg {
    width: 42px;
    height: 42px;
}

.classroom-submission-state {
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(223, 231, 232, 0.96);
    background: linear-gradient(180deg, rgba(248, 251, 250, 0.98), rgba(243, 247, 246, 0.94));
}

.classroom-submission-state strong {
    color: var(--brand-strong);
}

.classroom-submission-state span {
    color: var(--muted);
    line-height: 1.6;
}

.classroom-submission-state.is-pending {
    border-color: rgba(202, 103, 2, 0.18);
    background: linear-gradient(180deg, rgba(255, 247, 236, 0.96), rgba(251, 243, 233, 0.92));
}

.classroom-submission-state.is-submitted {
    border-color: rgba(0, 95, 115, 0.16);
    background: linear-gradient(180deg, rgba(240, 248, 249, 0.98), rgba(235, 245, 244, 0.94));
}

.classroom-submission-state.is-graded {
    border-color: rgba(42, 157, 143, 0.22);
    background: linear-gradient(180deg, rgba(238, 250, 247, 0.98), rgba(232, 247, 243, 0.94));
}

.classroom-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

.classroom-progress-item {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(223, 231, 232, 0.96);
    background: rgba(255, 255, 255, 0.82);
    justify-items: center;
    text-align: center;
}

.classroom-progress-item strong {
    color: var(--brand-strong);
    font-size: 0.92rem;
}

.classroom-progress-item span {
    color: var(--muted);
    line-height: 1;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--brand-primary);
}

.classroom-progress-item.is-current {
    border-color: rgba(202, 103, 2, 0.24);
    background: linear-gradient(180deg, rgba(255, 247, 236, 0.98), rgba(251, 243, 233, 0.94));
}

.classroom-progress-item.is-done {
    border-color: rgba(42, 157, 143, 0.22);
    background: linear-gradient(180deg, rgba(238, 250, 247, 0.98), rgba(232, 247, 243, 0.94));
}

.classroom-week-stack {
    display: grid;
    gap: 18px;
}

.classroom-week-group {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(248, 250, 249, 0.98), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(220, 229, 230, 0.96);
}

.classroom-week-details {
    overflow: hidden;
}

.classroom-week-details > summary {
    cursor: pointer;
    list-style: none;
}

.classroom-week-details > summary::-webkit-details-marker {
    display: none;
}

.classroom-week-details > summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.08);
    color: var(--brand);
    font-weight: 800;
}

.classroom-week-details[open] > summary::after {
    content: "-";
}

.classroom-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(223, 231, 232, 0.92);
    flex-wrap: wrap;
}

.classroom-week-head h4 {
    margin: 4px 0 0;
    font-size: 1.18rem;
    color: var(--brand-strong);
}

.classroom-week-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.06);
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
}

.classroom-week-subtitle {
    margin: 14px 0 10px;
    color: var(--brand-strong);
    font-size: 0.95rem;
    font-weight: 800;
}

.classroom-week-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
}

.classroom-form-layout,
.classroom-creation-grid {
    display: grid;
    gap: 18px;
}

.classroom-form-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    align-items: start;
}

.classroom-creation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.classroom-form-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(231, 223, 209, 0.9);
}

.classroom-activity-brief + .classroom-form-card {
    margin-top: 20px;
}

.classroom-quiz-builder {
    padding: 18px;
    border-radius: 22px;
    background: rgba(246, 249, 247, 0.9);
    border: 1px solid rgba(231, 223, 209, 0.9);
}

.teacher-classroom-shell .classroom-quiz-builder .quiz-question-item > .stack,
.teacher-classroom-shell .classroom-quiz-builder .quiz-question-item > .stack + label,
.teacher-classroom-shell .classroom-quiz-builder .quiz-question-item > [data-remove-quiz-question] {
    margin-top: 8px;
}

.course-card-pill {
    margin-bottom: 4px;
    background: rgba(0, 95, 115, 0.09);
    color: var(--brand);
}

.student-classroom-shell {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding: 6px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(184, 205, 212, 0.2), transparent 24%),
        radial-gradient(circle at top right, rgba(222, 229, 232, 0.42), transparent 30%),
        linear-gradient(180deg, rgba(245, 247, 248, 0.98), rgba(239, 244, 245, 0.96));
    border: 1px solid rgba(222, 229, 231, 0.95);
    box-shadow: 0 22px 48px rgba(32, 58, 63, 0.07);
}

.student-classroom-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 38%),
        radial-gradient(circle at 85% 14%, rgba(255, 255, 255, 0.22), transparent 18%);
    pointer-events: none;
}

.student-classroom-shell > * {
    position: relative;
    z-index: 1;
}

.student-classroom-shell .classroom-side-panel,
.student-classroom-shell .classroom-section {
    border: 1px solid rgba(209, 222, 226, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 252, 0.86));
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 38px rgba(24, 45, 52, 0.08);
}

.student-classroom-shell .classroom-side-panel {
    display: none;
    padding: 8px;
    border-radius: 12px;
    position: static;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 250, 0.92));
}

.student-classroom-shell .panel-head {
    margin-bottom: 6px;
}

.student-classroom-shell .classroom-section > .panel-head {
    justify-content: center;
    text-align: center;
}

.student-classroom-shell .panel-head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 10px;
    border-radius: 999px;
    background: rgba(0, 95, 115, 0.1);
    border: 1px solid rgba(0, 95, 115, 0.16);
    letter-spacing: 0.08em;
    font-size: 1rem;
    color: #004b5b;
    box-shadow: 0 8px 18px rgba(0, 95, 115, 0.08);
}

.student-classroom-shell .course-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.student-classroom-shell .course-card {
    --course-accent: #ff7a18;
    --course-accent-soft: rgba(255, 122, 24, 0.16);
    --course-accent-strong: rgba(255, 122, 24, 0.88);
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 220px;
    padding: 18px 18px 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 236, 0.95);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 196, 113, 0.4), transparent 33%),
        radial-gradient(circle at 0% 100%, rgba(55, 174, 186, 0.12), transparent 28%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 251, 0.96));
    box-shadow: 0 22px 44px rgba(25, 52, 58, 0.1);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.student-classroom-shell .course-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255, 122, 24, 0.42), rgba(18, 87, 101, 0.14), rgba(39, 166, 178, 0.28));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.9;
    pointer-events: none;
}

.student-classroom-shell .course-card::after {
    content: "";
    position: absolute;
    top: -38px;
    right: -32px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 43, 0.24), transparent 68%);
    z-index: 0;
}

.student-classroom-shell .course-card-top,
.student-classroom-shell .course-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.student-classroom-shell .course-card-body {
    display: grid;
    gap: 6px;
    align-content: start;
    position: relative;
    z-index: 1;
}

.student-classroom-shell .course-card strong {
    font-size: 1.08rem;
    line-height: 1.4;
    color: #163743;
    max-width: 18ch;
}

.student-classroom-shell .course-card-body span,
.student-classroom-shell .course-card small {
    color: #5d6d73;
}

.student-classroom-shell .course-card small {
    line-height: 1.3;
    font-size: 0.8rem;
}

.student-classroom-shell .course-card-top,
.student-classroom-shell .course-card-meta,
.student-classroom-shell .course-card-link {
    position: relative;
    z-index: 1;
}

.student-classroom-shell .course-card-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(18, 84, 97, 0.08);
    color: #2b5862;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.student-classroom-shell .course-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(18, 56, 68, 0.08), rgba(255, 122, 24, 0.18));
    color: #143844;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(223, 177, 134, 0.34);
}

.student-classroom-shell .course-card.is-active,
.student-classroom-shell .course-card:hover {
    border-color: rgba(255, 144, 59, 0.34);
    transform: translateY(-4px);
    box-shadow: 0 26px 48px rgba(27, 60, 68, 0.14);
}

.student-classroom-shell .course-card.is-active {
    background:
        radial-gradient(circle at top right, rgba(255, 195, 116, 0.28), transparent 28%),
        radial-gradient(circle at bottom left, rgba(66, 182, 193, 0.2), transparent 25%),
        linear-gradient(145deg, #102e38 0%, #174552 52%, #1f5e66 100%);
    border-color: rgba(255, 172, 91, 0.38);
}

.student-classroom-shell .course-card.is-active strong,
.student-classroom-shell .course-card.is-active .course-card-body span,
.student-classroom-shell .course-card.is-active small,
.student-classroom-shell .course-card.is-active .course-card-pill,
.student-classroom-shell .course-card.is-active .course-card-count,
.student-classroom-shell .course-card.is-active .course-card-link {
    color: #fff;
}

.student-classroom-shell .course-card-pill {
    align-self: start;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.16), rgba(255, 179, 71, 0.28));
    color: #994d08;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    font-weight: 800;
}

.student-classroom-shell .course-card.is-active .course-card-pill,
.student-classroom-shell .course-card.is-active .course-card-count,
.student-classroom-shell .course-card.is-active .course-card-link {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.14);
}

.student-classroom-shell .course-card.is-active .course-card-pill {
    color: #ffe4c3;
}

.student-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.student-subject-card {
    --subject-accent: #087f8c;
    position: relative;
    display: grid;
    gap: 16px;
    min-height: 240px;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid #cbdfe2;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.82), transparent 30%),
        radial-gradient(circle at bottom left, rgba(8, 127, 140, 0.08), transparent 34%),
        linear-gradient(160deg, #f7fbfc 0%, #edf5f6 52%, #e7f1f3 100%);
    box-shadow: 0 18px 38px rgba(29, 75, 84, 0.1);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.student-subject-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.18), rgba(8, 127, 140, 0.12));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.student-subject-card::after {
    content: "";
    position: absolute;
    top: -42px;
    right: -36px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
    z-index: 0;
}

.student-subject-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.student-subject-code {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(8, 127, 140, 0.1);
    color: #075866;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid rgba(8, 127, 140, 0.18);
}

.student-subject-score {
    position: relative;
    z-index: 1;
}

.student-subject-score.badge-muted.student-subject-no-grade,
.student-subject-stat strong.student-subject-no-grade {
    color: #1675a8;
}

.student-subject-card-body h4 {
    margin: 0;
    color: #173b43;
    font-size: 1.08rem;
    line-height: 1.38;
    max-width: 18ch;
}

.student-subject-card-body p {
    margin: 6px 0 0;
    color: #526a70;
    font-size: 0.92rem;
}

.student-subject-card-body,
.student-subject-meta,
.student-subject-actions {
    position: relative;
    z-index: 1;
}

.student-subject-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-subject-stat {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(8, 80, 91, 0.12);
    color: #173b43;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    justify-items: center;
    text-align: center;
}

.student-subject-stat small {
    color: #60777c;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.student-subject-stat strong {
    font-size: 1rem;
    color: #173b43;
}

.student-subject-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
}

.student-subject-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0b8992, #08717e 52%, #075866 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(8, 113, 126, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.student-subject-link:hover,
.student-subject-link:focus-visible {
    color: #fff;
    transform: translateY(-1px);
}

.student-subject-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(18, 56, 68, 0.06);
    color: #50646a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-subject-card:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 127, 140, 0.38);
    box-shadow: 0 28px 54px rgba(30, 98, 109, 0.14);
}

.student-classroom-shell .classroom-main {
    gap: 8px;
}

.student-classroom-shell .student-classroom-hero .classroom-hero-main {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(140deg, #0f2f3a 0%, #173f49 48%, #284d57 100%);
}

.student-classroom-shell .classroom-hero {
    grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.68fr);
    gap: 8px;
}

.student-classroom-shell .classroom-hero-main {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 0;
    box-shadow: 0 24px 46px rgba(18, 52, 61, 0.18);
}

.student-classroom-shell .classroom-hero-main::before {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.student-classroom-shell .classroom-hero-main::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 24px;
    width: 92px;
    height: 92px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    transform: rotate(14deg);
}

.student-classroom-shell .classroom-hero-main > * {
    position: relative;
    z-index: 1;
}

.student-classroom-shell .classroom-hero-main h3 {
    max-width: 820px;
    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.student-classroom-shell .dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.14em;
    font-size: 0.56rem;
}

.student-classroom-shell .classroom-hero-meta {
    gap: 6px;
    margin-top: 8px;
}

.student-classroom-shell .classroom-hero-meta span {
    padding: 4px 7px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.student-classroom-shell .classroom-summary-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.student-classroom-shell .classroom-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 64px;
    padding: 8px;
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
    border: 1px solid rgba(214, 225, 229, 0.9);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.56), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 248, 0.94));
    box-shadow: 0 14px 30px rgba(24, 45, 52, 0.08);
}

.student-classroom-shell .classroom-summary-card:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.5), transparent 28%),
        linear-gradient(180deg, rgba(250, 252, 252, 0.98), rgba(240, 246, 247, 0.94));
}

.student-classroom-shell .classroom-summary-card:nth-child(3) {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.48), transparent 28%),
        linear-gradient(180deg, rgba(250, 251, 252, 0.98), rgba(242, 245, 247, 0.94));
}

.student-classroom-shell .classroom-summary-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: rgba(30, 79, 91, 0.08);
}

.student-classroom-shell .classroom-summary-card strong {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

.student-classroom-shell .classroom-section {
    padding: 8px;
    border-radius: 16px;
}

.student-classroom-shell .classroom-week-stack {
    gap: 8px;
}

.student-classroom-shell .classroom-week-group {
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 251, 0.94));
    border: 1px solid rgba(218, 228, 231, 0.92);
    box-shadow: 0 14px 28px rgba(27, 46, 52, 0.06);
}

.student-classroom-shell .classroom-week-head {
    padding-bottom: 6px;
}

.student-classroom-shell .classroom-week-head h4 {
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

.student-classroom-shell .classroom-week-head > span {
    padding: 3px 7px;
    background: rgba(35, 78, 87, 0.08);
    color: #294a53;
}

.student-classroom-shell .classroom-week-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 14px;
    color: #234e57;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.student-classroom-shell .classroom-week-subtitle::before,
.student-classroom-shell .classroom-week-subtitle::after {
    content: "";
    flex: 1 1 56px;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(42, 111, 151, 0.48));
}

.student-classroom-shell .classroom-week-subtitle::after {
    transform: rotate(180deg);
}

.student-classroom-shell .classroom-materials-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.student-classroom-shell .classroom-resource-card,
.student-classroom-shell .classroom-activity-card,
.student-classroom-shell .forum-post,
.student-classroom-shell .quiz-fieldset,
.student-classroom-shell .classroom-form-card,
.student-classroom-shell .result-banner {
    border: 1px solid rgba(214, 225, 229, 0.92);
    box-shadow: 0 16px 32px rgba(24, 45, 52, 0.075);
}

.student-classroom-shell .classroom-resource-card,
.student-classroom-shell .classroom-activity-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.64), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 251, 0.95));
}

.student-classroom-shell .classroom-resource-card {
    padding: 8px;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.student-classroom-shell .student-materials-section .classroom-resource-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(42, 111, 151, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 252, 0.96) 58%, rgba(255, 247, 232, 0.9));
    box-shadow: 0 16px 30px rgba(34, 74, 98, 0.08);
}

.student-classroom-shell .student-materials-section .classroom-resource-card:nth-child(2n) {
    border-color: rgba(42, 157, 143, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 246, 0.96) 58%, rgba(244, 241, 255, 0.88));
    box-shadow: 0 16px 30px rgba(31, 111, 101, 0.08);
}

.student-classroom-shell .student-materials-section .classroom-resource-card:nth-child(3n) {
    border-color: rgba(202, 103, 2, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 235, 0.95) 58%, rgba(238, 247, 252, 0.9));
    box-shadow: 0 16px 30px rgba(133, 82, 18, 0.08);
}

.student-classroom-shell .student-materials-section .classroom-resource-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #2a6f97, #f4a261);
}

.student-classroom-shell .student-materials-section .classroom-resource-card:nth-child(2n)::before {
    background: linear-gradient(180deg, #2a9d8f, #7c5cff);
}

.student-classroom-shell .student-materials-section .classroom-resource-card:nth-child(3n)::before {
    background: linear-gradient(180deg, #ca6702, #2a6f97);
}

.student-classroom-shell .student-materials-section .classroom-resource-card:hover {
    border-color: rgba(42, 111, 151, 0.32);
    box-shadow: 0 20px 36px rgba(34, 74, 98, 0.12);
}

.student-classroom-shell .classroom-resource-card:hover,
.student-classroom-shell .classroom-activity-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 95, 115, 0.24);
    box-shadow: 0 22px 40px rgba(22, 44, 51, 0.11);
}

.student-classroom-shell .classroom-resource-card h3,
.student-classroom-shell .classroom-activity-card h3 {
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--brand-strong);
    text-wrap: balance;
}

.student-classroom-shell .classroom-resource-card p,
.student-classroom-shell .classroom-activity-card p,
.student-classroom-shell .forum-post p {
    line-height: 1.78;
    color: #56676d;
}

.student-classroom-shell .classroom-icon-chip {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.student-classroom-shell .classroom-icon-chip svg {
    width: 40px;
    height: 40px;
}

.student-classroom-shell .badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(35, 78, 87, 0.08);
    color: #294a53;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    border: 1px solid rgba(35, 78, 87, 0.08);
}

.student-classroom-shell .student-materials-section .badge {
    background: rgba(42, 111, 151, 0.1);
    color: #22577a;
    border-color: rgba(42, 111, 151, 0.18);
}

.student-classroom-shell .classroom-card-meta {
    gap: 5px;
}

.student-classroom-shell .classroom-card-meta span {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 0.66rem;
    background: rgba(43, 83, 92, 0.06);
    color: #3f5961;
}

.student-classroom-shell .student-materials-section .classroom-card-meta span {
    background: rgba(244, 162, 97, 0.18);
    color: #7a4a12;
}

.student-classroom-shell .classroom-activity-card {
    position: relative;
    overflow: hidden;
    padding: 9px;
    border-radius: 16px;
}

.student-classroom-shell .classroom-activity-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(15, 47, 58, 0.04), transparent 68%);
    pointer-events: none;
}

.student-classroom-shell .classroom-activity-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 28px 0 0 28px;
    background: linear-gradient(180deg, #123844 0%, #315c66 100%);
}

.student-classroom-shell .activity-card-head {
    align-items: start;
}

.student-classroom-shell .classroom-activity-title {
    gap: 7px;
}

.student-classroom-shell .classroom-activity-kickers {
    gap: 6px;
    font-size: 0.7rem;
}

.student-classroom-shell .classroom-activity-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
}

.student-classroom-shell .activity-meta {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.student-classroom-shell .activity-meta > span:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 6px;
    font-size: 0.68rem;
    border-radius: 999px;
    background: rgba(35, 78, 87, 0.07);
    color: #294a53;
    font-weight: 700;
}

.student-classroom-shell .classroom-due-badge {
    min-height: 22px;
    padding-inline: 6px;
    font-size: 0.64rem;
}

.student-classroom-shell .classroom-download-row {
    margin-top: 6px;
}

.student-classroom-shell .classroom-download-row .button-link {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(21, 69, 78, 0.06);
    border-color: rgba(21, 69, 78, 0.12);
    color: #264850;
}

.student-classroom-shell .classroom-download-row .button-link.forum-view-button {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.student-classroom-shell .classroom-download-row .button-link.forum-view-button:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: #fff;
}

.student-classroom-shell .classroom-file-link {
    gap: 6px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.student-classroom-shell .classroom-file-link svg {
    width: 28px;
    height: 28px;
}

.student-classroom-shell .classroom-file-link-icon {
    gap: 10px;
}

.student-classroom-shell .classroom-file-link-icon svg {
    width: 42px;
    height: 42px;
}

.student-classroom-shell .student-syllabus-download svg {
    width: 120px;
    height: 120px;
}

.student-classroom-shell .classroom-file-link-icon span {
    font-size: 0.82rem;
}

.student-classroom-shell .result-banner {
    margin: 6px 0 8px;
    padding: 6px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(237, 245, 246, 0.96), rgba(244, 248, 249, 0.98));
}

.student-classroom-shell .forum-thread {
    display: grid;
    gap: 6px;
}

.student-classroom-shell .forum-post {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 248, 0.92));
}

.student-classroom-shell .forum-post strong {
    color: var(--brand-strong);
    font-size: 0.98rem;
}

.student-classroom-shell .forum-post span {
    margin-top: 4px;
    color: #6b7d82;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.student-classroom-shell .classroom-form-card,
.student-classroom-shell .quiz-fieldset {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 248, 0.94));
}

.student-classroom-shell input[type="file"],
.student-classroom-shell textarea,
.student-classroom-shell input[type="text"],
.student-classroom-shell input[type="search"],
.student-classroom-shell select {
    border-radius: 16px;
    border-color: rgba(213, 222, 225, 0.96);
    background: rgba(251, 252, 252, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.student-classroom-shell button[type="submit"],
.student-classroom-shell .button-link {
    border-radius: 14px;
}

.student-classroom-shell .quiz-fieldset legend {
    padding: 0 8px;
    color: var(--brand-strong);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.student-classroom-shell .checkbox {
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(36, 76, 86, 0.04);
    border: 1px solid rgba(222, 230, 231, 0.9);
}

.student-classroom-shell .helper {
    line-height: 1.8;
}

.student-classroom-shell .quiz-completed-message {
    margin-top: 10px;
    color: #0f766e;
    font-weight: 800;
}

.subject-list {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

.subject-list legend,
.subject-list legend * {
    color: #0b2d4d;
    font-weight: 700;
}

.subject-list legend {
    position: relative;
    top: 30px;
    z-index: 1;
    margin-bottom: 30px;
}

.checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.checkbox input {
    width: auto;
    margin-top: 4px;
}

.hero-carousel-wrap {
    padding: 0;
    width: 100vw;
    margin-top: 50px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: block;
}

.hero-carousel {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #0b4b56;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
    opacity: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    transition: opacity 0.5s ease;
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide-copy {
    width: min(1720px, calc(100vw - (var(--content-gutter) * 2)));
    padding: 42px;
    color: #fff;
}

.hero-slide-pill {
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.hero-slide-copy h2 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(3rem, 5.4vw, 5.4rem);
    line-height: 1.02;
}

.hero-slide-copy .landing-lead {
    max-width: 760px;
    font-size: 1.16rem;
    line-height: 1.85;
}

.hero-carousel-controls {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    z-index: 2;
}

.hero-carousel-nav {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
    font-size: 1.6rem;
}

.hero-carousel-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(7, 59, 76, 0.36);
    backdrop-filter: blur(8px);
}

.hero-carousel-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.hero-carousel-dot.is-active {
    background: #fff;
    transform: scale(1.15);
}

.landing-hero-banner-support {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 34px;
    padding: 36px 40px 28px;
}

.home-page-flow {
    display: grid;
    gap: 36px;
    width: min(var(--content-width), calc(100vw - (var(--content-gutter) * 2)));
    margin: 0 auto;
    padding: 44px 0 36px;
    align-items: start;
}

.home-page-flow > * {
    width: 100%;
}

.home-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(420px, 0.7fr);
    gap: 28px;
    align-items: stretch;
}

.home-overview-hero {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 52px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(145deg, #082f3a 0%, #0a4351 55%, #0d5660 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

.home-overview-hero h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    line-height: 1.06;
}

.home-overview-hero p:last-of-type {
    margin: 0;
    max-width: 720px;
    font-size: 1.12rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.88);
}

.home-overview-stats {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.home-card-section {
    display: grid;
    gap: 22px;
}

.home-section-head {
    display: grid;
    gap: 10px;
    justify-items: start;
    text-align: left;
}

.home-section-head h2 {
    margin: 0;
    max-width: 780px;
    color: var(--brand-strong);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.1;
}

.home-card-grid {
    display: grid;
    gap: 22px;
    align-items: stretch;
}

.home-card-grid-primary {
    grid-template-columns: minmax(0, 1.45fr) minmax(420px, 0.8fr);
}

.home-card-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-card-column {
    display: grid;
    gap: 22px;
    align-content: start;
}

.home-card-grid-admission {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-info-card,
.home-panel-card {
    height: 100%;
}

.home-info-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 30px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 244, 0.94));
    border: 1px solid rgba(231, 223, 209, 0.9);
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-info-card:hover,
.home-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(38, 52, 56, 0.1);
    border-color: rgba(0, 95, 115, 0.16);
}

.home-info-card h3 {
    margin: 0;
    color: var(--brand-strong);
    font-size: 1.35rem;
    line-height: 1.25;
}

.home-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.75;
}

.home-info-card .icon-chip {
    margin-bottom: 2px;
}

.home-info-card-featured {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(242, 248, 246, 0.96));
}

.home-info-card-accent {
    background: linear-gradient(145deg, #0b3e4b 0%, #0d5660 100%);
    border-color: rgba(8, 61, 74, 0.16);
}

.home-info-card-accent h3,
.home-info-card-accent p {
    color: #fff;
}

.home-info-card-accent p {
    color: rgba(255, 255, 255, 0.86);
}

.home-info-card-dark {
    background: linear-gradient(180deg, rgba(11, 62, 75, 0.97), rgba(8, 47, 58, 0.97));
    border-color: rgba(255, 255, 255, 0.08);
}

.home-info-card-dark h3,
.home-info-card-dark p {
    color: #fff;
}

.home-info-card-dark p {
    color: rgba(255, 255, 255, 0.82);
}

.home-panel-card {
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(231, 223, 209, 0.9);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 249, 247, 0.94));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.home-panel-card .panel-head {
    margin-bottom: 18px;
}

.home-panel-card .panel-head h3 {
    margin: 0;
    font-size: 1.45rem;
    color: var(--brand-strong);
}

.landing-sections-three,
.benefits-grid {
    align-items: stretch;
}

.benefits-grid .reason-card,
.access-item,
.step-item {
    min-height: 100%;
}

.steps-list,
.benefits-grid,
.access-list {
    gap: 16px;
}

.reason-card,
.access-item,
.step-item {
    background: rgba(255, 255, 255, 0.82);
}

.landing-copy-compact {
    min-height: 100%;
}

.landing-copy-compact .landing-lead,
.showcase-card p,
.showcase-card span,
.showcase-grid span,
.band-card strong,
.reason-card strong,
.highlight-point strong,
.step-item strong {
    font-size: 1.1rem;
}

.program-item strong {
    font-size: 1.08rem;
}

.band-card strong,
.reason-card p,
.program-item span,
.highlight-copy p,
.highlight-point span,
.split-copy p:last-child,
.landing-cta-card p:not(.landing-kicker),
.step-item p {
    font-size: 1rem;
    line-height: 1.75;
}

.split-copy h3 {
    font-size: clamp(2rem, 3vw, 3.1rem);
}

.highlight-copy h3 {
    font-size: clamp(2.1rem, 3vw, 3.2rem);
}

.landing-cta-card h3 {
    font-size: clamp(2.2rem, 3.4vw, 3.5rem);
}

.home-reasons-grid .reason-card {
    min-height: 220px;
}

.banner-admin-grid {
    align-items: start;
}

.banner-form-span {
    grid-column: 1 / -1;
}

.banner-admin-preview {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
}

.banner-admin-list {
    display: grid;
    gap: 16px;
}

.banner-admin-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(231, 223, 209, 0.95);
    background: rgba(255, 255, 255, 0.82);
}

.banner-admin-card img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    border-radius: 18px;
}

.banner-admin-card-copy {
    display: grid;
    gap: 8px;
}

.banner-admin-card-copy p,
.banner-admin-card-copy span,
.banner-admin-card-copy small {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.banner-admin-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.banner-actions {
    margin-top: 8px;
}

.badge-success {
    background: rgba(42, 157, 143, 0.16);
    color: #1d6f67;
}

.badge-muted {
    background: rgba(107, 114, 128, 0.14);
    color: #ffffff;
}

@media (max-width: 960px) {
    .app-shell,
    .grid-two,
    .hero-banner-shell,
    .landing-hero,
    .landing-hero-banner-support,
    .home-overview,
    .landing-band,
    .landing-info-grid,
    .landing-highlight,
    .landing-split,
    .showcase-grid,
    .hero-metrics,
    .reasons-grid,
    .reasons-grid-wide,
    .program-grid,
    .landing-sections-three {
        grid-template-columns: 1fr;
    }

    .sidebar {
        gap: 24px;
        position: static;
        height: auto;
    }

    .content-auth {
        padding: 18px;
    }

    .auth-shell,
    .auth-metrics {
        grid-template-columns: 1fr;
    }

    .login-info-grid {
        grid-template-columns: 1fr;
    }

    .auth-shell-single {
        grid-template-columns: minmax(0, 100%);
        width: 100vw;
        margin: 0 auto;
    }

    .auth-login-card {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .auth-login-topline {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .auth-login-brand {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .auth-login-hero,
    .auth-login-access {
        min-width: 0;
        padding: 32px 24px;
    }

    .auth-login-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-login-logo-panel {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .auth-login-logo-mark {
        width: min(230px, 100%);
        height: 140px;
    }

    .auth-login-logo-copy h2 {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
        overflow-wrap: anywhere;
    }

    .auth-login-access-head h3 {
        font-size: clamp(1.8rem, 7vw, 2.2rem);
        overflow-wrap: anywhere;
    }

    .auth-login-support {
        align-items: stretch;
    }

    .auth-login-support a {
        overflow-wrap: anywhere;
    }

    .auth-public-topbar {
        padding: 14px 18px;
    }

    .auth-login-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .auth-login-copy,
    .auth-login-pills,
    .auth-login-note,
    .auth-login-support {
        text-align: center;
        justify-content: center;
    }

    .auth-login-support {
        flex-direction: column;
    }

    .auth-elegant-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px;
        border-radius: 0;
    }

    .auth-elegant-footer-links {
        justify-content: center;
        gap: 10px 14px;
    }

    .auth-elegant-footer-meta,
    .auth-elegant-footer-social {
        justify-items: center;
        justify-content: center;
    }

    .auth-elegant-footer-links a + a {
        margin-left: 0;
        padding-left: 0;
    }

    .auth-elegant-footer-links a + a::before {
        display: none;
    }

    .landing-copy,
    .landing-showcase {
        padding: 24px;
    }

    .hero-banner {
        padding: 18px 18px 12px;
    }

    .hero-banner-shell {
        padding: 24px;
        border-radius: 28px;
    }

    .hero-banner-copy h1 {
        font-size: 2.5rem;
    }

    .hero-banner-lead,
    .hero-banner-card p,
    .hero-banner-stat span {
        font-size: 1.05rem;
    }

    .hero-banner-stats {
        grid-template-columns: 1fr;
    }

    .public-topbar,
    .public-nav,
    .public-topbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .public-topbar {
        position: static;
        padding: 16px 18px;
    }

    .content-public-home {
        padding-top: 0;
    }

    .landing-hero {
        min-height: auto;
        padding: 18px;
    }

    .landing-band,
    .home-page-flow,
    .landing-sections-three,
    .landing-page-block,
    .landing-cta {
        padding-left: 18px;
        padding-right: 18px;
    }

    .home-page-flow {
        width: calc(100vw - 36px);
        margin: 0 auto;
        padding-top: 28px;
        padding-bottom: 28px;
        padding-left: 0;
        padding-right: 0;
    }

    .landing-highlight,
    .landing-access,
    .landing-split {
        margin-left: 18px;
        margin-right: 18px;
    }

    .hero-carousel-wrap {
        padding: 0;
    }

    .hero-carousel {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-slide {
        padding: 20px;
        align-items: center;
    }

    .hero-slide-copy {
        padding: 24px;
    }

    .home-overview-hero {
        padding: 28px;
    }

    .home-card-grid-primary,
    .home-card-grid-secondary,
    .home-card-grid-admission {
        grid-template-columns: 1fr;
    }

    .home-card-column {
        grid-template-columns: 1fr;
    }

    .home-info-card,
    .home-panel-card {
        min-height: auto;
        height: auto;
    }

    .landing-sections-three .landing-panel {
        height: auto;
    }

    .landing-lead,
    .hero-metric span,
    .reason-card p,
    .program-item span,
    .highlight-copy p,
    .highlight-point span,
    .split-copy p:last-child,
    .landing-cta-card p:not(.landing-kicker),
    .landing-copy-compact .landing-lead,
    .showcase-card p,
    .showcase-card span,
    .showcase-grid span,
    .band-card strong,
    .reason-card strong,
    .program-item strong,
    .highlight-point strong,
    .step-item strong {
        font-size: 1.1rem;
    }

    .hero-carousel-controls {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .banner-admin-card {
        grid-template-columns: 1fr;
    }

    .landing-split {
        padding: 0;
    }

    .landing-copy h2 {
        font-size: 2.5rem;
    }

    .hero-slide-copy h2 {
        font-size: 2.2rem;
    }

    .hero-slide-copy .landing-lead {
        font-size: 1rem;
    }

    .home-overview-hero h2 {
        font-size: 2.35rem;
    }

    .band-card,
    .program-item,
    .highlight-point,
    .reason-card {
        min-height: auto;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
        width: 100%;
        padding: 18px;
    }

    .topbar-copy,
    .topbar-meta,
    .topbar-pill > div {
        min-width: 0;
    }

    .topbar-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-pill {
        grid-template-columns: 46px minmax(0, 1fr);
        min-width: 0;
        width: 100%;
    }

    .topbar-pill strong,
    .topbar-pill span:last-child {
        overflow-wrap: anywhere;
    }

    .topbar-user-line {
        flex-wrap: wrap;
        overflow-wrap: anywhere;
    }

    .dashboard-hero,
    .dashboard-stats-grid,
    .dashboard-panels,
    .dashboard-neo-hero,
    .dashboard-neo-grid-main,
    .dashboard-neo-grid-secondary,
    .dashboard-neo-grid-tertiary,
    .dashboard-modern-banner,
    .dashboard-modern-stats,
    .dashboard-modern-grid,
    .dashboard-modern-chart-grid,
    .dashboard-modern-activity-layout,
    .portal-hero,
    .student-dashboard-metrics,
    .student-dashboard-layout,
    .classroom-shell,
    .classroom-hero,
    .classroom-form-layout,
    .classroom-creation-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-modern-banner,
    .dashboard-modern-summary,
    .dashboard-modern-panel,
    .dashboard-modern-activity-item {
        border-radius: 24px;
    }

    .dashboard-modern-copy,
    .dashboard-modern-summary {
        padding: 8px;
    }

    .dashboard-modern-metrics,
    .dashboard-modern-quick-grid,
    .dashboard-modern-signal-grid,
    .dashboard-modern-donut-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-modern-panel-head,
    .dashboard-modern-status-head,
    .dashboard-neo-panel-head,
    .dashboard-neo-comparison-copy {
        align-items: start;
    }

    .student-panel-head {
        display: grid;
    }

    .student-period-badge {
        margin-top: 4px;
    }

    .dashboard-neo-metrics,
    .dashboard-neo-hero-stats,
    .dashboard-neo-side-meta,
    .dashboard-neo-side-period,
    .dashboard-neo-hero-strips,
    .dashboard-neo-trend-summary,
    .dashboard-neo-quick-grid,
    .dashboard-neo-finance-row,
    .dashboard-modern-finance-row {
        grid-template-columns: 1fr;
    }

    .dashboard-neo-hero-topline,
    .dashboard-neo-hero-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-neo-hero-topline {
        justify-content: start;
    }

    .dashboard-modern-finance-value {
        text-align: left;
    }

    .dashboard-neo-donut-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-neo-trend-day,
    .dashboard-neo-stat-glass {
        padding: 14px;
    }

    .dashboard-neo-panel,
    .dashboard-neo-side-card,
    .dashboard-neo-hero-main {
        padding: 22px;
        border-radius: 26px;
    }

    .dashboard-neo-activity-card {
        grid-template-columns: 1fr;
    }

    .dashboard-neo-activity-meta {
        justify-items: start;
    }

    .dashboard-modern-activity-item {
        grid-template-columns: 1fr;
    }

    .dashboard-modern-activity-meta {
        justify-items: start;
    }

    .dashboard-modern-activity-meta small {
        text-align: left;
    }

    .dashboard-modern-column-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: auto;
    }

    .dashboard-modern-column-item {
        min-height: 180px;
    }

    .dashboard-modern-donut {
        width: 180px;
        height: 180px;
    }

    .dashboard-modern-donut-center {
        width: 104px;
        height: 104px;
    }

    .teacher-course-browser-hero,
    .teacher-course-browser-stats,
    .teacher-classroom-hero .classroom-summary-grid {
        grid-template-columns: 1fr;
    }

    .teacher-course-browser-hero,
    .teacher-course-tile {
        padding: 16px;
    }

    .teacher-classroom-hero-actions {
        flex-direction: column;
    }

    .teacher-classroom-hero-actions .button-link,
    .teacher-classroom-back {
        width: 100%;
    }

    .classroom-side-panel {
        position: static;
    }

    .student-classroom-shell {
        padding: 14px;
        border-radius: 28px;
    }

    .student-classroom-shell .course-list,
    .student-subject-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-classroom-shell .classroom-side-panel,
    .student-classroom-shell .classroom-section,
    .student-classroom-shell .classroom-hero-main,
    .student-classroom-shell .classroom-summary-card,
    .student-classroom-shell .classroom-week-group,
    .student-classroom-shell .classroom-resource-card,
    .student-classroom-shell .classroom-activity-card,
    .student-classroom-shell .classroom-form-card,
    .student-classroom-shell .quiz-fieldset {
        border-radius: 24px;
    }

    .student-classroom-shell .classroom-hero-main,
    .student-classroom-shell .classroom-section,
    .student-classroom-shell .classroom-side-panel,
    .student-classroom-shell .classroom-activity-card {
        padding: 20px;
    }

    .student-classroom-shell .activity-meta {
        justify-items: start;
    }

    .home-enrollment-intro {
        grid-template-columns: 1fr;
    }

    .home-enrollment-intro .helper,
    .home-faculty-item strong,
    .home-faculty-item > span:last-child {
        text-align: justify;
    }

    .home-demand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-program-grid .home-faculty-item {
        padding: 18px;
    }

    .home-faculty-icon {
        width: 20px;
        height: 20px;
    }

    .home-enrollment-sidecard .hero-actions {
        grid-template-columns: 1fr;
    }

    .home-enrollment-points span {
        min-height: auto;
    }
}

@media (max-width: 680px) {
    .home-demand-grid {
        grid-template-columns: 1fr;
    }

    .report-actions-grid {
        grid-template-columns: 1fr;
    }

    .student-classroom-shell .course-list,
    .student-subject-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 961px) and (max-width: 1100px) {
    .home-demand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 920px) {
    .content-auth {
        align-items: flex-start;
        justify-content: center;
    }

    .auth-shell-single {
        place-content: start center;
    }

    .auth-login-shell {
        padding: 24px 0;
    }
}

@media (min-width: 769px) {
    .auth-login-shell {
        padding-top: 0;
    }

    .auth-login-stack.fade-in-up {
        animation: none;
    }
}

/* Responsive Design para Header */
@media (max-width: 768px) {
    .public-topbar {
        min-height: 72px;
        padding: 8px 16px;
        gap: 12px;
        flex-direction: row;
        align-items: center;
        background: #005F73;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    .public-brand {
        gap: 0;
        min-width: 0;
        flex: 1 1 auto;
        position: static;
        transform: none;
    }
    
    .public-brand strong {
        font-size: 1.1rem;
        color: white;
    }
    
    .brand-text {
        display: none;
    }
    
    .brand-text small {
        display: none;
        font-size: 0.75rem !important;
    }
    
    .public-nav {
        display: none;
    }
    
    .public-topbar-actions {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
        flex: 0 0 32px;
        margin-left: auto;
    }
    
    .mobile-menu-toggle span {
        background: white;
    }
    
    .hero-carousel-wrap,
    .home-academic-shell,
    .landing-sections,
    .landing-cta {
        scroll-margin-top: 70px;
    }

    .hero-carousel-wrap {
        margin-top: 10px;
    }

    .hero-carousel {
        min-height: min(760px, calc(100dvh - 72px));
    }

    .hero-slide {
        padding: 16px;
        align-items: center;
    }

    .hero-slide-copy {
        width: 100%;
        padding: 18px 4px 72px;
    }

    .hero-slide-copy h2 {
        font-size: clamp(2rem, 9vw, 3rem);
        overflow-wrap: anywhere;
    }

    .hero-slide-copy .landing-lead {
        font-size: 1rem;
        line-height: 1.65;
    }

    .hero-actions {
        gap: 10px;
        margin-top: 24px;
    }

    .hero-actions .button-link {
        min-width: 0;
        max-width: 100%;
        text-align: center;
    }

    .landing-page-block {
        padding: 0 12px 18px;
    }

    .home-enrollment-panel {
        gap: 18px;
        padding: 12px;
    }

    .home-enrollment-card,
    .home-enrollment-sidecard {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .home-enrollment-intro h3 {
        font-size: clamp(2rem, 8vw, 3rem);
        overflow-wrap: anywhere;
    }

    .home-enrollment-intro .helper {
        font-size: 1rem;
        line-height: 1.65;
        text-align: left;
    }

    .home-program-grid .home-faculty-item {
        padding: 16px 14px;
        gap: 8px;
        border-radius: 16px;
    }

    .home-faculty-item strong,
    .home-faculty-item > span:last-child {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .public-topbar {
        padding: 8px 12px;
    }
    
    .public-brand strong {
        font-size: 1rem;
    }
    
    .home-public-brand-mark {
        width: min(150px, 48vw);
        height: 56px;
        display: flex;
        justify-content: center;        
    }

    .mobile-nav {
        top: 72px;
    }

    .auth-public-page .mobile-nav-content > .mobile-nav-link:first-child {
        margin-top: 10px;
    }

    .hero-carousel-controls {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .hero-carousel-nav {
        width: 44px;
        height: 44px;
    }

    .hero-actions,
    .home-enrollment-sidecard .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-actions .button-link {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
    }

    .auth-login-shell {
        padding: 16px 10px 24px;
    }

    .auth-login-card {
        border-radius: 20px;
    }

    .auth-login-hero,
    .auth-login-access {
        padding: 24px 16px;
    }

    .auth-login-hero {
        gap: 16px;
        padding: 18px 14px;
    }

    .auth-login-topline {
        gap: 8px;
        padding-bottom: 10px;
    }

    .auth-login-top-pill {
        padding: 7px 10px;
        font-size: 0.78rem;
    }

    .auth-login-top-text {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .auth-login-logo-panel {
        gap: 12px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    .auth-login-logo-mark {
        height: 88px;
    }

    .auth-login-logo-copy {
        gap: 6px;
    }

    .auth-login-logo-copy h2 {
        font-size: 2rem;
        line-height: 1;
    }

    .auth-login-logo-copy p:last-child {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .auth-login-pills-hero {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .auth-login-pills-hero span {
        min-width: 0;
        padding: 8px 5px;
        font-size: 0.72rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .auth-login-access {
        gap: 16px;
        padding: 20px 14px;
    }

    .auth-login-access-head h3 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .auth-login-access-head p {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .auth-login-note {
        gap: 6px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .auth-login-note span {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .auth-login-copy,
    .auth-login-access-head p,
    .auth-login-note span {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .auth-login-pills {
        justify-content: stretch;
    }

    .auth-login-pills span {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    .auth-login-support {
        flex-direction: column;
        text-align: center;
    }

    .auth-login-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .auth-login-footer span {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .app-shell {
        display: block;
        min-width: 0;
    }

    .sidebar {
        position: sticky;
        z-index: 40;
        top: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 10px;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 8px 12px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 22px rgba(5, 29, 38, 0.16);
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        justify-items: start;
        gap: 10px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sidebar-brand-mark {
        flex: 0 0 48px;
        width: 48px;
        height: 42px;
        margin: 0;
    }

    .sidebar-brand > div:last-child {
        min-width: 0;
    }

    .sidebar .brand-kicker {
        display: none;
    }

    .sidebar .brand-copy {
        margin: 0;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .mobile-sidebar-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-sidebar-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .sidebar.is-open .mobile-sidebar-toggle span:first-child {
        transform: translateY(7px) rotate(45deg);
    }

    .sidebar.is-open .mobile-sidebar-toggle span:nth-child(2) {
        opacity: 0;
    }

    .sidebar.is-open .mobile-sidebar-toggle span:last-child {
        transform: translateY(-7px) rotate(-45deg);
    }

    .sidebar .nav {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        max-height: min(60dvh, 440px);
        margin-top: 8px;
        padding: 10px 0 2px;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .sidebar.is-open .nav {
        display: grid;
    }

    .sidebar .nav a {
        min-width: 0;
        min-height: 44px;
        padding: 9px 10px;
        gap: 8px;
        border-radius: 11px;
        font-size: 0.84rem;
    }

    .sidebar .nav-icon {
        width: 19px;
        height: 19px;
    }

    .content {
        width: 100%;
        min-width: 0;
        padding: 14px;
        overflow-x: clip;
    }

    .topbar {
        gap: 12px;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .topbar h2 {
        font-size: clamp(1.35rem, 5vw, 1.8rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .topbar-user-line {
        overflow-wrap: anywhere;
    }

    .content > *,
    .grid-two > *,
    .grid-cards > *,
    .form-grid > * {
        min-width: 0;
    }

    .panel {
        padding: 16px;
        border-radius: 18px;
    }

    .panel-head {
        margin-bottom: 14px;
        padding-bottom: 11px;
    }

    .panel-head h3 {
        font-size: 1.12rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .form-grid,
    .stack {
        gap: 12px;
    }

    label {
        min-width: 0;
        line-height: 1.4;
    }

    input,
    select,
    textarea {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    input[type="file"] {
        padding: 10px;
    }

    button,
    .button-link {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .actions-cell {
        flex-wrap: wrap;
        gap: 8px;
    }

    .actions-cell form,
    .actions-cell .button-link,
    .actions-cell button {
        max-width: 100%;
    }

    .auth-elegant-footer {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .sidebar {
        padding: 7px 10px;
    }

    .sidebar .nav {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 10px;
    }

    .topbar {
        padding: 13px;
        border-radius: 16px;
    }

    .topbar h2 {
        font-size: 1.3rem;
    }

    .topbar-pill {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .topbar-pill-icon {
        width: 40px;
        height: 40px;
    }

    .panel {
        padding: 13px;
        border-radius: 16px;
    }

    .panel-head h3 {
        font-size: 1.04rem;
    }

    .table-wrap table {
        min-width: 560px;
    }

    .actions-cell form,
    .actions-cell .button-link,
    .actions-cell button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .students-page .students-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .students-page .students-table thead {
        display: none;
    }

    .students-page .students-table tbody {
        display: grid;
        gap: 10px;
        padding: 10px;
    }

    .students-page .students-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 12px;
        padding: 12px;
        border: 1px solid rgba(214, 225, 229, 0.95);
        border-radius: 12px;
        background: linear-gradient(180deg, #fff, #f7fafb);
        box-shadow: 0 8px 18px rgba(24, 45, 52, 0.06);
    }

    .students-page .students-table tbody td {
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .students-page .students-table tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #64747b;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .students-page .students-table tbody td:nth-child(1)::before {
        content: "Documento";
    }

    .students-page .students-table tbody td:nth-child(2)::before {
        content: "Nombre";
    }

    .students-page .students-table tbody td:nth-child(3)::before {
        content: "Programa";
    }

    .students-page .students-table tbody td:nth-child(4)::before {
        content: "Estado";
    }

    .students-page .students-table tbody td.actions-cell {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(214, 225, 229, 0.9);
    }

    .students-page .students-table tbody td.actions-cell::before {
        grid-column: 1 / -1;
        content: "Acciones";
    }

    .students-page .students-table .actions-cell .button-link,
    .students-page .students-table .actions-cell form,
    .students-page .students-table .actions-cell button {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        margin: 0;
    }

    .students-page .students-table tbody td[colspan] {
        grid-column: 1 / -1;
        text-align: center;
    }

    .students-page .students-table tbody td[colspan]::before {
        content: none;
    }
}

@media (max-width: 360px) {
    .students-page .students-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
    }

    .students-page .students-table tbody td.actions-cell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.teacher-student-count {
    color: #2196f3;
    font-weight: 700;
}

.teacher-students-export {
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .teacher-students-courses-panel .table-wrap,
    .teacher-students-panel .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .teacher-students-courses-table,
    .teacher-students-list-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .teacher-students-courses-panel .table-wrap table.teacher-students-courses-table,
    .teacher-students-panel .table-wrap table.teacher-students-list-table {
        min-width: 0;
    }

    .teacher-students-courses-table thead,
    .teacher-students-list-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .teacher-students-courses-table tbody,
    .teacher-students-list-table tbody {
        display: grid;
        gap: 12px;
    }

    .teacher-students-courses-table tbody tr,
    .teacher-students-list-table tbody tr {
        display: grid;
        gap: 8px 12px;
        padding: 14px;
        border: 1px solid #dce5e9;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(24, 45, 52, 0.07);
    }

    .teacher-students-courses-table tbody tr,
    .teacher-students-list-table tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-students-courses-table tbody td,
    .teacher-students-list-table tbody td {
        min-width: 0;
        padding: 3px 0;
        border: 0;
        color: #1f2933;
        text-align: left;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .teacher-students-courses-table tbody td::before,
    .teacher-students-list-table tbody td::before {
        display: block;
        margin-bottom: 4px;
        color: #64747b;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: 1.3;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .teacher-students-courses-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 800;
        color: #164e63;
    }

    .teacher-students-courses-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 1.02rem;
        font-weight: 700;
        color: #173d4a;
    }

    .teacher-students-courses-table tbody td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .teacher-students-courses-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        color: #1565c0;
        font-size: 1.1rem;
        font-weight: 800;
    }

    .teacher-students-courses-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 8px;
        border-top: 1px solid #e6ecef;
    }

    .teacher-students-list-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .teacher-students-list-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 1rem;
        font-weight: 750;
        color: #173d4a;
    }

    .teacher-students-list-table tbody td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .teacher-students-list-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .teacher-students-list-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .teacher-students-list-table tbody td:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    .teacher-students-courses-table tbody td[colspan],
    .teacher-students-list-table tbody td[colspan] {
        grid-column: 1 / -1;
        grid-row: auto;
        text-align: center;
    }

    .teacher-students-courses-table tbody td[colspan]::before,
    .teacher-students-list-table tbody td[colspan]::before {
        content: none;
    }

    .teacher-students-courses-table .button-link,
    .teacher-students-export-link {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 46px;
        text-align: center;
    }
}

@media (max-width: 960px) {
    .teacher-portal-hero,
    .teacher-dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .teacher-portal-hero {
        gap: 12px;
        margin-bottom: 16px;
    }

    .teacher-portal-hero .portal-hero-main {
        padding: 20px;
        border-radius: 20px;
    }

    .teacher-portal-hero .portal-hero-main h3 {
        font-size: 1.55rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .teacher-portal-hero .portal-hero-main > p:last-of-type {
        margin-top: 12px;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .teacher-portal-hero .dashboard-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 18px;
    }

    .teacher-portal-hero .dashboard-hero-actions .button-link {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    .teacher-profile-card {
        padding: 18px;
        border-radius: 18px;
    }

    .teacher-profile-head {
        gap: 10px;
    }

    .teacher-profile-head strong {
        font-size: 1.25rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .teacher-profile-grid {
        gap: 8px;
    }

    .teacher-profile-grid p {
        min-width: 0;
        padding: 11px;
        border-radius: 12px;
    }

    .teacher-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .teacher-stat-card {
        min-width: 0;
        min-height: 0;
        padding: 14px;
        border-radius: 16px;
        gap: 10px;
    }

    .teacher-stat-top {
        gap: 8px;
    }

    .teacher-stat-card .icon-chip {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .teacher-stat-card .icon-chip svg {
        width: 20px;
        height: 20px;
    }

    .teacher-stat-card p {
        font-size: 0.76rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .teacher-stat-card strong {
        font-size: 1.65rem;
        line-height: 1.1;
    }

    .teacher-stat-card > span {
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .teacher-dashboard-panels {
        gap: 12px;
    }

    .teacher-dashboard-panel {
        min-width: 0;
        padding: 15px;
        border-radius: 18px;
    }

    .teacher-dashboard-panel .panel-head h3 {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 640px) {
    .teacher-profile-grid {
        grid-template-columns: 1fr;
    }

    .teacher-profile-grid .teacher-profile-email-card {
        grid-column: auto;
        text-align: left;
    }

    .teacher-dashboard-panel .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .teacher-dashboard-panel .teacher-courses-table,
    .teacher-dashboard-panel .teacher-evaluations-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .teacher-dashboard-panel .teacher-courses-table thead,
    .teacher-dashboard-panel .teacher-evaluations-table thead {
        display: none;
    }

    .teacher-dashboard-panel .teacher-courses-table tbody,
    .teacher-dashboard-panel .teacher-evaluations-table tbody {
        display: grid;
        gap: 10px;
    }

    .teacher-dashboard-panel .teacher-courses-table tbody tr,
    .teacher-dashboard-panel .teacher-evaluations-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 10px;
        padding: 11px;
        border: 1px solid rgba(214, 225, 229, 0.95);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(24, 45, 52, 0.06);
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td,
    .teacher-dashboard-panel .teacher-evaluations-table tbody td {
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td::before,
    .teacher-dashboard-panel .teacher-evaluations-table tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #64747b;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td:nth-child(1)::before {
        content: "Asignatura";
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td:nth-child(2)::before {
        content: "Programa";
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td:nth-child(3)::before {
        content: "Estado";
    }

    .teacher-dashboard-panel .teacher-evaluations-table tbody td:nth-child(1)::before {
        content: "Estudiante";
    }

    .teacher-dashboard-panel .teacher-evaluations-table tbody td:nth-child(2)::before {
        content: "Asignatura";
    }

    .teacher-dashboard-panel .teacher-evaluations-table tbody td:nth-child(3)::before {
        content: "Programa";
    }

    .teacher-dashboard-panel .teacher-evaluations-table tbody td:nth-child(4)::before {
        content: "Nota";
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td[colspan],
    .teacher-dashboard-panel .teacher-evaluations-table tbody td[colspan] {
        grid-column: 1 / -1;
        text-align: center;
    }

    .teacher-dashboard-panel .teacher-courses-table tbody td[colspan]::before,
    .teacher-dashboard-panel .teacher-evaluations-table tbody td[colspan]::before {
        content: none;
    }
}

@media (max-width: 380px) {
    .teacher-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .teacher-portal-hero > *,
    .teacher-dashboard-stats > *,
    .teacher-dashboard-panels > * {
        min-width: 0;
    }

    .teacher-profile-head {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
    }

    .teacher-profile-head .icon-chip {
        width: 40px;
        height: 40px;
    }

    .teacher-profile-head strong,
    .teacher-profile-grid p {
        overflow-wrap: anywhere;
    }

    .teacher-dashboard-panel {
        padding: 12px;
    }
}

@media (max-width: 700px) {
    .student-classroom-shell {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 8px;
        border-radius: 18px;
    }

    .student-classroom-shell > *,
    .student-classroom-shell .classroom-main > * {
        min-width: 0;
        max-width: 100%;
    }

    .student-classroom-shell .student-classroom-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .student-classroom-shell .student-classroom-hero .classroom-hero-main {
        min-width: 0;
        padding: 16px;
        border-radius: 18px;
    }

    .student-classroom-shell .student-classroom-hero .classroom-hero-main h3 {
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .classroom-hero-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        margin-top: 12px;
    }

    .student-classroom-shell .classroom-hero-meta span {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .classroom-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .student-classroom-shell .classroom-summary-card {
        min-width: 0;
        min-height: 68px;
        padding: 8px 4px;
        border-radius: 12px;
    }

    .student-classroom-shell .classroom-summary-card p {
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .classroom-section {
        min-width: 0;
        padding: 14px;
    }

    .student-classroom-shell .classroom-week-group {
        min-width: 0;
        padding: 10px;
    }

    .student-classroom-shell .classroom-week-stack {
        margin-top: -60px;
    }

    .student-classroom-shell .classroom-week-head,
    .student-classroom-shell .classroom-week-head > div {
        min-width: 0;
    }

    .student-classroom-shell .classroom-activity-card {
        box-sizing: border-box;
        padding: 14px;
    }

    .student-classroom-shell .classroom-form-card,
    .student-classroom-shell .quiz-fieldset,
    .student-classroom-shell .result-banner {
        box-sizing: border-box;
        padding: 12px;
    }

    .student-classroom-shell .classroom-delivery-toggle,
    .student-classroom-shell .classroom-delivery-toggle summary {
        width: 100%;
        box-sizing: border-box;
    }

    .student-classroom-shell .classroom-delivery-toggle summary {
        min-height: 44px;
        text-align: center;
    }

    .student-classroom-shell .classroom-week-head h4,
    .student-classroom-shell .classroom-week-head > span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .classroom-materials-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-classroom-shell .classroom-resource-card,
    .student-classroom-shell .classroom-activity-card,
    .student-classroom-shell .classroom-form-card,
    .student-classroom-shell .quiz-fieldset,
    .student-classroom-shell .result-banner {
        min-width: 0;
    }

    .student-classroom-shell .classroom-resource-card h3,
    .student-classroom-shell .classroom-resource-card p,
    .student-classroom-shell .classroom-activity-card h3,
    .student-classroom-shell .classroom-activity-card p {
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .activity-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .student-classroom-shell .classroom-activity-title,
    .student-classroom-shell .classroom-activity-title > div {
        min-width: 0;
    }

    .student-classroom-shell .activity-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        justify-items: start;
        gap: 6px;
    }

    .student-classroom-shell .activity-meta > span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .student-classroom-shell .classroom-activity-kickers {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .student-classroom-shell .classroom-activity-close-inline {
        grid-column: auto;
        justify-self: start;
        white-space: normal;
        text-align: left;
    }

    .student-classroom-shell .classroom-activity-kicker-ghost {
        display: none;
    }

    .student-classroom-shell .classroom-form-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .student-classroom-shell .classroom-form-layout > *,
    .student-classroom-shell .classroom-form-card label,
    .student-classroom-shell .submission-status-label,
    .student-classroom-shell .submission-status-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .student-classroom-shell input[type="file"],
    .student-classroom-shell textarea,
    .student-classroom-shell input[type="text"],
    .student-classroom-shell select {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .student-classroom-shell .checkbox {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
    }

    .student-classroom-shell .checkbox input[type="radio"] {
        flex: 0 0 auto;
        width: auto;
        margin-top: 3px;
    }

    .student-classroom-shell .classroom-download-row .button-link {
        width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    .student-classroom-shell .student-syllabus-download svg {
        width: 88px;
        height: 88px;
    }
}

@media (max-width: 380px) {
    .student-classroom-shell {
        padding: 6px;
        border-radius: 14px;
    }

    .student-classroom-shell .classroom-section {
        padding: 10px;
    }

    .student-classroom-shell .classroom-hero-main {
        padding: 12px;
    }

    .student-classroom-shell .classroom-hero-meta span {
        font-size: 0.72rem;
    }

    .student-classroom-shell .classroom-summary-card p {
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }

    .student-classroom-shell .classroom-summary-card strong {
        font-size: 1.1rem;
    }

    .student-classroom-shell .classroom-week-head {
        gap: 8px;
    }

    .student-classroom-shell .classroom-week-head > span {
        font-size: 0.62rem;
        padding: 3px 6px;
    }

    .student-classroom-shell .classroom-activity-card {
        padding: 12px;
    }
}

@media (max-width: 680px) {
    .student-subject-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .student-subject-card {
        box-sizing: border-box;
        min-width: 0;
        min-height: 0;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
    }

    .student-subject-card-top {
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .student-subject-code,
    .student-subject-score {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .student-subject-card-body,
    .student-subject-meta,
    .student-subject-actions {
        min-width: 0;
    }

    .student-subject-card-body h4,
    .student-subject-card-body p {
        max-width: none;
        overflow-wrap: anywhere;
    }

    .student-subject-meta {
        gap: 8px;
    }

    .student-subject-stat {
        min-width: 0;
        padding: 10px 8px;
        border-radius: 12px;
    }

    .student-subject-stat small,
    .student-subject-stat strong {
        overflow-wrap: anywhere;
    }

    .student-subject-stat small {
        letter-spacing: 0.04em;
    }

    .student-subject-link,
    .student-subject-pending {
        box-sizing: border-box;
        min-height: 44px;
        padding: 11px 10px;
        letter-spacing: 0.05em;
        line-height: 1.3;
        white-space: normal;
        text-align: center;
    }
}

.student-grades-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.student-grades-export {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.student-grades-table {
    width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .student-grades-panel {
        min-width: 0;
        padding: 16px;
        border-radius: 18px;
    }

    .student-grades-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .student-grades-export {
        width: 100%;
    }

    .student-grades-panel .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .student-grades-table {
        display: table;
        width: 100%;
        min-width: 720px;
        table-layout: auto;
    }

    .student-grades-table thead {
        display: table-header-group;
    }

    .student-grades-table tbody {
        display: table-row-group;
    }

    .student-grades-table tbody tr {
        display: table-row;
    }

    .student-grades-table th,
    .student-grades-table td {
        min-width: 88px;
        padding: 10px 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .student-grades-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f1f6f6;
        color: #17323a;
        text-align: left;
    }

    .student-grades-table tbody td::before {
        content: none;
    }

    .student-grades-table tbody td[colspan] {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .payments-history-panel .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .payments-history-panel .payments-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .payments-history-panel .payments-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .payments-history-panel .payments-table tbody {
        display: grid;
        gap: 10px;
    }

    .payments-history-panel .payments-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 12px;
        padding: 12px;
        border: 1px solid rgba(214, 225, 229, 0.95);
        border-radius: 12px;
        background: linear-gradient(180deg, #fff, #f7fafb);
        box-shadow: 0 8px 18px rgba(24, 45, 52, 0.06);
    }

    .payments-history-panel .payments-table tbody td {
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        color: #1f2933;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .payments-history-panel .payments-table tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #64747b;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .payments-history-panel .payments-table tbody td:first-child,
    .payments-history-panel .payments-table tbody td[colspan] {
        grid-column: 1 / -1;
    }

    .payments-history-panel .payments-table tbody td[colspan] {
        text-align: center;
    }

    .payments-history-panel .payments-table tbody td[colspan]::before {
        content: none;
    }

    .payments-history-panel .payment-balance {
        min-width: 0;
        max-width: 100%;
        padding: 6px 8px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.change-password-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    margin-inline: auto;
}

.change-password-form {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

@media (max-width: 640px) {
    .change-password-panel {
        padding: 16px;
    }

    .change-password-form {
        gap: 14px;
    }

    .change-password-form label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .change-password-form input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 48px;
    }

    .change-password-form button {
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 380px) {
    .change-password-panel {
        padding: 14px;
        border-radius: 14px;
    }

    .change-password-panel .panel-head {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .change-password-form {
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .teacher-classroom-shell {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 10px;
    }

    .teacher-classroom-shell > *,
    .teacher-classroom-shell .classroom-main > *,
    .teacher-classroom-shell .classroom-section > * {
        min-width: 0;
        max-width: 100%;
    }

    .teacher-classroom-shell .classroom-hero-main,
    .teacher-classroom-shell .classroom-section {
        padding: 16px;
    }

    .teacher-classroom-shell .classroom-hero-main h3,
    .teacher-classroom-shell .classroom-section h3,
    .teacher-classroom-shell .classroom-resource-card h3,
    .teacher-classroom-shell .classroom-resource-card p {
        overflow-wrap: anywhere;
    }

    .teacher-classroom-shell .classroom-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-classroom-shell .classroom-summary-card {
        box-sizing: border-box;
        min-width: 0;
        min-height: 90px;
        padding: 12px 8px;
        border-radius: 16px;
    }

    .teacher-classroom-shell .classroom-summary-card p {
        overflow-wrap: anywhere;
    }

    .teacher-classroom-shell .teacher-classroom-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-classroom-shell .teacher-classroom-hero-actions .button-link,
    .teacher-classroom-shell .classroom-download-row .button-link {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    .teacher-classroom-shell .classroom-download-row {
        flex-wrap: wrap;
    }

    .teacher-classroom-shell .classroom-week-head,
    .teacher-classroom-shell .classroom-week-head > div {
        min-width: 0;
    }

    .teacher-classroom-shell .classroom-week-head h4,
    .teacher-classroom-shell .classroom-week-head > span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .teacher-classroom-shell .classroom-form-card {
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        padding: 14px;
    }

    .teacher-classroom-shell .classroom-form-card > *,
    .teacher-classroom-shell .classroom-form-card label,
    .teacher-classroom-shell .classroom-quiz-builder {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .teacher-classroom-shell .classroom-form-card input,
    .teacher-classroom-shell .classroom-form-card textarea,
    .teacher-classroom-shell .classroom-form-card select {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .teacher-classroom-shell .classroom-form-card > button,
    .teacher-classroom-shell .classroom-quiz-builder > button {
        width: 100%;
        min-height: 44px;
    }

    .teacher-classroom-shell .classroom-grade-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-classroom-shell .classroom-grade-panel-head .classroom-download-row {
        width: 100%;
    }

    .teacher-classroom-shell .classroom-grade-panel-head .classroom-download-row .button-link {
        flex: 1 1 140px;
    }

    .teacher-classroom-shell .classroom-materials-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-classroom-shell .classroom-resource-card,
    .teacher-classroom-shell .classroom-resource-heading {
        min-width: 0;
    }

    .teacher-classroom-shell .classroom-resource-card h3,
    .teacher-classroom-shell .classroom-resource-card p,
    .teacher-classroom-shell .classroom-resource-card .badge {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .teacher-classroom-shell .classroom-resource-card .badge {
        white-space: normal;
    }

    .teacher-classroom-shell .classroom-grade-panel .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .teacher-classroom-shell .classroom-grade-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .teacher-classroom-shell .classroom-grade-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .teacher-classroom-shell .classroom-grade-table tbody {
        display: grid;
        gap: 10px;
    }

    .teacher-classroom-shell .classroom-grade-table tbody tr {
        display: grid;
        gap: 6px;
        padding: 12px;
        border: 1px solid rgba(214, 225, 229, 0.95);
        border-radius: 12px;
        background: linear-gradient(180deg, #fff, #f7fafb);
        box-shadow: 0 8px 18px rgba(24, 45, 52, 0.06);
    }

    .teacher-classroom-shell .classroom-grade-table tbody td {
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        color: #1f2933;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .teacher-classroom-shell .classroom-grade-table tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #64747b;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .teacher-classroom-shell .classroom-grade-input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 160px;
    }

    .teacher-classroom-shell .classroom-grade-feedback {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .teacher-classroom-shell .classroom-grade-table button {
        width: 100%;
        min-height: 44px;
    }

    .teacher-classroom-shell .classroom-grade-message {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 640px) {
    .teacher-gradebook-panel-primary .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .teacher-gradebook-panel-primary .grades-entry-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .teacher-gradebook-panel-primary .grades-entry-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody {
        display: grid;
        gap: 10px;
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 12px;
        padding: 12px;
        border: 1px solid rgba(214, 225, 229, 0.95);
        border-radius: 12px;
        background: linear-gradient(180deg, #fff, #f7fafb);
        box-shadow: 0 8px 18px rgba(24, 45, 52, 0.06);
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody td {
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        color: #1f2933;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #64747b;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody td:nth-child(1),
    .teacher-gradebook-panel-primary .grades-entry-table tbody td:nth-child(2),
    .teacher-gradebook-panel-primary .grades-entry-table tbody td[colspan] {
        grid-column: 1 / -1;
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody td[colspan] {
        text-align: center;
    }

    .teacher-gradebook-panel-primary .grades-entry-table tbody td[colspan]::before {
        content: none;
    }

    .teacher-gradebook-panel-primary .grades-entry-table input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 140px;
        text-align: left;
    }

    .teacher-gradebook-panel-primary form.stack > button {
        width: 100%;
        min-height: 46px;
    }
}