:root {
  --vdt-black: #101010;
  --vdt-yellow: #d9cd00;
  --vdt-cream: #fffef1;
  --vdt-bg: #f5f6f8;
  --vdt-muted: #687080;
  --vdt-radius: 24px;
  --vdt-shadow: 0 14px 35px rgba(16, 16, 16, .08);
}

html { scroll-behavior: smooth; }
body.vdt-app { background: var(--vdt-bg) !important; color: var(--vdt-black); padding-bottom: 84px; overflow-x: hidden; }
.vdt-topbar { min-height: 72px; box-shadow: 0 1px 0 rgba(16,16,16,.08); }
.vdt-topbar-with-sidebar { margin-left: 250px; }
.vdt-topbar .navbar-brand img { height: 42px !important; max-width: 150px; object-fit: contain; }
.vdt-topbar .container, main.container { max-width: 1240px; }
main.container { padding-top: 24px !important; }

.vdt-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1045; width: 250px;
  display: flex; flex-direction: column; padding: 24px 16px 18px;
  background: var(--vdt-black); color: white; border-right: 1px solid rgba(255,255,255,.08);
}
.vdt-sidebar-brand { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 0 8px 18px; }
.vdt-sidebar-brand small { display: block; color: #aeb4c0; font-size: .75rem; }
.vdt-sidebar-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: var(--vdt-yellow); color: var(--vdt-black); font-weight: 900; font-size: .72rem; }
.vdt-sidebar nav { display: grid; gap: 7px; }
.vdt-sidebar nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 14px; color: #f3f3f3; text-decoration: none; font-weight: 700; }
.vdt-sidebar nav a span { display: grid; place-items: center; width: 24px; color: var(--vdt-yellow); font-size: 1.05rem; }
.vdt-sidebar nav a:hover, .vdt-sidebar nav a.active { background: rgba(255,255,255,.11); color: white; }
.vdt-sidebar nav a.active { box-shadow: inset 4px 0 0 var(--vdt-yellow); }
.vdt-sidebar-logout { margin-top: auto; min-height: 46px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; color: white; text-decoration: none; font-weight: 700; }
.vdt-main-with-sidebar { margin-left: 250px; max-width: none !important; width: calc(100% - 250px); padding-inline: clamp(24px, 4vw, 64px) !important; }
.vdt-profile-initial { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 24px; background: var(--vdt-black); color: var(--vdt-yellow); font-size: 2rem; font-weight: 900; }
.admin-profile-card { border-top: 6px solid var(--vdt-yellow) !important; }
.vdt-back-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; }

.card, .soft, .accordion-item, main .bg-white.border, main .alert,
main form.bg-white, main .table-responsive {
  border-radius: var(--vdt-radius) !important;
  border-color: rgba(16,16,16,.09) !important;
  box-shadow: var(--vdt-shadow) !important;
  overflow: hidden;
}
.btn { border-radius: 14px; min-height: 42px; font-weight: 700; }
.btn-primary, .btn-success { background: var(--vdt-yellow); border-color: var(--vdt-yellow); color: var(--vdt-black); }
.btn-primary:hover, .btn-success:hover { background: #bdb300; border-color: #bdb300; color: var(--vdt-black); }
.btn-outline-primary { border-color: var(--vdt-black); color: var(--vdt-black); }
.btn-outline-primary:hover { background: var(--vdt-black); border-color: var(--vdt-black); }
.progress { height: 10px; border-radius: 999px; background: #e8e9ed; }
.progress-bar { background: var(--vdt-yellow); border-radius: 999px; }
.form-control, .form-select { min-height: 48px; border-radius: 14px; border-color: #d9dce2; background-color: white; }
.form-control:focus, .form-select:focus { border-color: var(--vdt-yellow); box-shadow: 0 0 0 .22rem rgba(217,205,0,.18); }
.form-select { cursor: pointer; padding-right: 2.75rem; }
.table { margin-bottom: 0; }
.badge { border-radius: 999px; padding: .55em .8em; }

/* Alumno: la misma informacion original, con jerarquia mas clara. */
.student-eyebrow { color: #756f00; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.student-greeting { font-size: 1.15rem; }
.student-summary-card { position: sticky; top: 92px; }
.student-coins-pill { background: var(--vdt-cream); border: 1px solid rgba(217,205,0,.45); border-radius: 18px; padding: 10px 14px; }
.student-course-switcher { background: #f3f4f6; border-radius: 18px; padding: 14px; }
.student-facts { display: grid; gap: 9px; }
.student-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #eceef1; }
.student-facts span { color: var(--vdt-muted); font-size: .82rem; }
.student-facts strong { text-align: right; }
.student-summary-actions .btn { flex: 1; }
.student-learning-heading { background: var(--vdt-black); color: white; }
.student-learning-heading .text-muted { color: #c6cad2 !important; }
.student-learning-heading .text-primary, .student-learning-heading .text-success, .student-learning-heading .text-dark { color: var(--vdt-yellow) !important; }
.student-learning-heading .badge { background: var(--vdt-yellow) !important; color: var(--vdt-black); }
.student-level-card { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.student-level-card.is-available { border-left: 5px solid var(--vdt-yellow) !important; }
.student-level-card.is-locked { background: #f4f5f7; box-shadow: none !important; opacity: .82; }
.student-level-card:hover { transform: translateY(-2px); }
.lesson-content-card .soft { background: #fafafa; box-shadow: none !important; line-height: 1.75; }
.lesson-resources-card iframe, .lesson-resources-card img { border-radius: 18px !important; }
.lesson-task-card { border-top: 6px solid var(--vdt-yellow) !important; }
.lesson-submissions-card table img { max-height: 86px; object-fit: cover; }
.student-profile-card .avatar { border: 4px solid var(--vdt-yellow); }
.student-progress-card, .student-courses-card { overflow-x: auto !important; }

/* Administrador y educador: controles originales con mejor lectura. */
.staff-hero-card { background: var(--vdt-black) !important; color: white; border: 0 !important; }
.staff-hero-card h2 { color: var(--vdt-yellow); }
.staff-hero-card .btn { background: white; color: var(--vdt-black); border-color: white; }
.staff-hero-card .btn:hover { background: var(--vdt-yellow); border-color: var(--vdt-yellow); }
.staff-filter-card { border-top: 6px solid var(--vdt-yellow) !important; }
.staff-results-card .border-bottom { background: #f8f8f5; }
.staff-results-card thead th { background: #f1f1ed; color: #414141; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.staff-results-card tbody tr:hover { background: var(--vdt-cream); }
.staff-page-heading h1, .staff-page-heading h2 { font-weight: 800; }
.staff-workspace-card { border-top: 6px solid var(--vdt-yellow) !important; }
.review-card { border-top: 5px solid var(--vdt-yellow) !important; }
.review-card img { border-radius: 18px !important; }
.cycle-grid, .lesson-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.cycle-card, .lesson-choice-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 210px; padding: 24px; background: white; border: 1px solid rgba(16,16,16,.09); border-radius: var(--vdt-radius); box-shadow: var(--vdt-shadow); }
.cycle-card.is-active { border-top: 6px solid var(--vdt-yellow); }
.cycle-card.is-historical { background: #f0f1f3; box-shadow: none; }
.cycle-card h3 { margin: 8px 0 0; font-size: 2rem; font-weight: 850; }
.cycle-status { color: #756f00; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lesson-choice-card span { color: #756f00; font-size: .72rem; font-weight: 850; letter-spacing: .06em; }
.lesson-choice-card h2 { font-size: 1.15rem; font-weight: 800; }
.lesson-choice-card.is-locked { background: #f1f2f4; box-shadow: none; opacity: .78; }
.empty-state { grid-column: 1 / -1; padding: 28px; border: 1px dashed #cfd2d8; border-radius: 20px; color: var(--vdt-muted); text-align: center; }
.attendance-class-grid, .subject-admin-grid, .admin-navigation-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.attendance-class-button, .subject-admin-grid a, .admin-navigation-grid a { display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid #dedfe3; border-radius:20px; background:#fff; color:var(--vdt-black); text-decoration:none; box-shadow:var(--vdt-shadow); }
.attendance-class-button span, .subject-admin-grid span, .admin-navigation-grid span { color:#756f00; font-size:.72rem; font-weight:850; letter-spacing:.07em; }
.attendance-class-button.active { background:var(--vdt-black); color:#fff; border-color:var(--vdt-black); box-shadow:inset 0 -5px 0 var(--vdt-yellow); }
.admin-navigation-grid a { min-height:210px; justify-content:space-between; }
.admin-navigation-grid strong { font-size:2.4rem; }
.admin-navigation-grid small { color:var(--vdt-muted); }
.admin-navigation-grid b { color:#756f00; }
.subject-admin-grid a.active { border:3px solid var(--vdt-yellow); }
.attendance-actions { display:grid; grid-template-columns:132px 132px 64px 92px; gap:8px; align-items:stretch; width:auto; justify-content:center; }
.attendance-actions > * { min-width:0; min-height:48px; }
.attendance-actions .btn { display:flex; align-items:center; justify-content:center; line-height:1.15; white-space:normal; }
.attendance-actions .btn-participacion { grid-column:auto; }
.student-create-panel > summary { display:inline-flex; list-style:none; cursor:pointer; }
.student-create-panel > summary::-webkit-details-marker { display:none; }
.student-create-panel[open] > summary { margin-bottom:12px; }
.submission-image-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; }
.submission-image-grid img { width:100%; aspect-ratio:4/3; object-fit:contain; background:#f2f3f5; border-radius:18px; border:1px solid #dedfe3; }
.submission-thumb { display:block; width:100%; padding:0; border:0; border-radius:18px; background:transparent; cursor:zoom-in; }
.submission-modal-image { display:block; max-width:100%; max-height:82vh; width:auto; height:auto; margin:auto; object-fit:contain; }
.submission-gallery-modal .modal-dialog { height:calc(100vh - 2rem); }
.submission-gallery-modal .modal-content { max-height:calc(100vh - 2rem); overflow:hidden; }
.submission-gallery-stage { position:relative; height:calc(100vh - 8rem); overflow:hidden; }
.submission-gallery-track { display:flex; width:100%; height:100%; overflow:hidden; scroll-behavior:smooth; scrollbar-width:none; }
.submission-gallery-track::-webkit-scrollbar { display:none; }
.submission-gallery-slide { flex:0 0 100%; display:grid; place-items:center; width:100%; min-width:100%; height:100%; padding:18px 76px; overflow:hidden; }
.submission-gallery-slide .submission-modal-image { display:block !important; width:auto !important; max-width:calc(100vw - 430px) !important; height:auto !important; max-height:calc(100vh - 10rem) !important; margin:auto !important; object-fit:contain !important; object-position:center !important; }
.submission-gallery-arrow { position:absolute; top:50%; z-index:3; display:grid; place-items:center; width:52px; height:72px; padding:0; transform:translateY(-50%); border:1px solid rgba(255,255,255,.3); border-radius:18px; background:rgba(16,16,16,.78); color:var(--vdt-yellow); font-size:3rem; line-height:1; box-shadow:0 8px 30px rgba(0,0,0,.28); }
.submission-gallery-arrow:hover { background:var(--vdt-yellow); color:var(--vdt-black); }
.submission-gallery-arrow:disabled { opacity:.2; pointer-events:none; }
.submission-gallery-arrow.is-previous { left:14px; }
.submission-gallery-arrow.is-next { right:14px; }
.submission-gallery-count { color:var(--vdt-muted); font-weight:600; }
.profile-simple-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(320px,1.2fr); gap:20px; max-width:980px; margin:auto; }
.profile-photo-large { display:block; width:min(100%,320px); aspect-ratio:1/1; margin:auto; border-radius:28px; object-fit:cover; border:5px solid var(--vdt-yellow); }
.profile-photo-placeholder { display:grid; place-items:center; background:#e7e8ec; font-size:4rem; }
.vdt-topbar-logout { min-height:36px; padding:7px 12px; border:1px solid #d7d9de; border-radius:12px; background:#fff; color:var(--vdt-black); font-weight:700; }
.educator-task-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.educator-task-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:20px; border:1px solid #dedfe3; border-radius:22px; background:#fff; box-shadow:var(--vdt-shadow); overflow:hidden; }
.educator-task-card h3 { margin:0; font-size:1rem; overflow-wrap:anywhere; }
.educator-task-meta { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid #eceef1; }
.educator-task-meta span { display:flex; flex-direction:column; gap:4px; padding:12px 8px; color:var(--vdt-muted); font-size:.75rem; }
.educator-task-meta span+span { border-left:1px solid #eceef1; }
.educator-task-meta strong { color:var(--vdt-black); font-size:.88rem; }
.admin-task-config { border:2px solid var(--vdt-yellow); border-radius:20px; background:var(--vdt-cream); }
.task-status { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #eceef1; font-size: .72rem; font-weight: 800; }
.task-status-approved { background: #d7f5e5; color: #087342; }
.task-status-pending { background: #fff1bd; color: #715800; }
.task-status-rejected { background: #ffe0e3; color: #9c2130; }

/* Acceso */
.login-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); max-width: 980px; min-height: 560px; margin: 36px auto; border-radius: 30px; overflow: hidden; box-shadow: var(--vdt-shadow); background: white; }
.login-intro { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 64px); background: var(--vdt-black); color: white; }
.login-intro .student-eyebrow { color: var(--vdt-yellow); }
.login-intro h1 { max-width: 470px; margin: 14px 0; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 850; line-height: 1.05; }
.login-intro p { color: #c6cad2; font-size: 1.05rem; }
.login-feature-list { display: grid; gap: 12px; margin-top: 28px; }
.login-feature-list span { padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 68px); }
.login-form-panel form { width: 100%; }

.vdt-mobile-nav { display: none; }
@media (max-width: 767.98px) {
  body.vdt-app { padding-bottom: 92px; }
  .vdt-topbar, .vdt-topbar-with-sidebar { min-height: 62px; margin-left: 0; }
  .vdt-topbar .container { padding-inline: 16px; }
  .vdt-topbar .navbar-brand img { height: 34px !important; max-width: 116px; }
  .vdt-topbar .avatar { width: 38px; height: 38px; }
  .vdt-topbar .btn-outline-dark { display: none; }
  body .vdt-sidebar { display: none !important; visibility: hidden !important; }
  .vdt-main-with-sidebar { margin-left: 0; width: 100%; max-width: 100% !important; padding-inline: 14px !important; }
  main.container { padding: 18px 14px 28px !important; }
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.45rem; }
  h3, .h3 { font-size: 1.3rem; }
  .card, .soft, .accordion-item, main .bg-white.border, main .alert,
  main form.bg-white, main .table-responsive { border-radius: 20px !important; }
  .p-4 { padding: 1.25rem !important; }
  .btn { min-height: 46px; }
  .table-responsive { border: 0 !important; box-shadow: none !important; }
  .table-responsive .table { min-width: 720px; }
  .vdt-mobile-nav {
    position: fixed; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    left: 10px; right: 10px; bottom: 10px; z-index: 1040;
    background: var(--vdt-black); border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px; padding: 7px; box-shadow: 0 16px 38px rgba(0,0,0,.3);
  }
  .vdt-mobile-nav a { color: white; text-decoration: none; text-align: center; font-size: .58rem; font-weight: 700; padding: 6px 1px; border-radius: 14px; }
  .vdt-mobile-nav a span { display: block; color: var(--vdt-yellow); font-size: 1rem; line-height: 1.1; margin-bottom: 3px; }
  .vdt-mobile-nav a:active { background: rgba(255,255,255,.12); }
  .student-summary-card { position: static; }
  .student-dashboard > [class*="col-"]:first-child { order: 1; }
  .student-dashboard > [class*="col-"]:last-child { order: 2; }
  .student-greeting { font-size: 1.05rem; }
  .student-coins-pill { padding: 8px 11px; }
  .student-learning-heading { padding: 1.15rem !important; }
  .student-learning-panel > .p-4 { padding: .8rem !important; }
  .student-level-card { padding: 1.1rem !important; border-radius: 18px !important; }
  .student-level-card .btn { width: 100%; }
  .student-page-heading { align-items: flex-start !important; }
  .student-page-heading h1 { font-size: 1.45rem; }
  .student-lesson-page .col-12, .student-profile-page .col-12 { padding-inline: 0; }
  .lesson-content-card, .lesson-resources-card, .lesson-task-card { padding: 1.15rem !important; }
  .lesson-submissions-card { overflow-x: auto !important; }
  .lesson-submissions-card table { min-width: 720px; }
  .student-facts > div { align-items: center; }
  .staff-hero-card, .staff-filter-card, .staff-workspace-card, .review-card { padding: 1.15rem !important; }
  .staff-hero-card .d-flex { display: grid !important; grid-template-columns: 1fr 1fr; }
  .staff-hero-card .btn { width: 100%; }
  .staff-filter-card .row > div, .staff-workspace-card .row > div { width: 100%; }
  .staff-results-card { overflow-x: auto !important; }
  .staff-results-card table:not(.vdt-card-table), .staff-workspace-card table:not(.vdt-card-table) { min-width: 820px; }
  .staff-page-heading { align-items: flex-start !important; }
  .review-grid .col-12 { padding-inline: 0; }
  .login-shell { display: block; min-height: 0; margin: 8px auto 24px; border-radius: 24px; }
  .login-intro { padding: 28px 22px; }
  .login-intro h1 { font-size: 1.8rem; }
  .login-intro p { margin-bottom: 0; }
  .login-feature-list { display: none; }
  .login-form-panel { padding: 28px 22px 32px; }

  .staff-results-card:has(.vdt-card-table) { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .table-responsive:has(.vdt-card-table) { width: 100% !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; }
  .vdt-card-table, .vdt-card-table tbody { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed; }
  .vdt-card-table thead { display: none; }
  .vdt-card-table tbody { padding: 10px; background: #f3f4f6; }
  .vdt-card-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: 100%; margin-bottom: 12px; padding: 16px; box-sizing: border-box; background: white; border: 1px solid rgba(16,16,16,.08); border-radius: 20px; box-shadow: 0 8px 24px rgba(16,16,16,.06); overflow: hidden; }
  .vdt-card-table tbody tr:last-child { margin-bottom: 0; }
  .vdt-card-table tbody td { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); gap: 10px; align-items: center; width: 100%; min-width: 0; padding: 9px 0 !important; border: 0; border-bottom: 1px solid #eceef1; text-align: right !important; overflow-wrap: anywhere; }
  .vdt-card-table tbody td:first-child { display: block; padding-top: 0 !important; text-align: left !important; font-size: 1.05rem; font-weight: 800; }
  .vdt-card-table tbody td:first-child::before { display: block; margin-bottom: 4px; }
  .vdt-card-table tbody td:last-child { border-bottom: 0; padding-bottom: 0 !important; }
  .vdt-card-table tbody td::before { content: attr(data-label); color: #756f00; font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .vdt-card-table tbody td .btn { width: 100%; }
  .vdt-card-table tbody td[data-label="Nivel"], .vdt-card-table tbody td[data-label="Lunitas"] { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; text-align: left !important; }
  .vdt-card-table tbody td[data-label="Nivel"] { padding-right: 12px !important; border-right: 1px solid #e3e4e7; }
  .vdt-card-table tbody td[data-label="Lunitas"] { padding-left: 12px !important; }
  .vdt-card-table tbody td.vdt-card-action { grid-column: 1 / -1; display: block; padding: 12px 5px 0 !important; border-bottom: 0; }
  .vdt-card-table tbody td.vdt-card-action-half { grid-column: auto; }
  .vdt-card-table tbody td.vdt-card-action::before { display: none; }
  .vdt-card-table tbody td[data-label="Tareas"],
  .vdt-card-table tbody td[data-label="Asistencia"],
  .vdt-card-table tbody td[data-label="Participación"],
  .vdt-card-table tbody td[data-label="Total"] { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; min-height: 68px; padding: 10px 8px !important; text-align: left !important; border-bottom: 1px solid #e3e4e7; }
  .vdt-card-table tbody td[data-label="Tareas"], .vdt-card-table tbody td[data-label="Participación"] { border-right: 1px solid #e3e4e7; }
  .attendance-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; justify-content:stretch; }
  .attendance-actions > * { width:100%; height:52px; min-height:52px; margin:0; }
  .attendance-actions .btn-participacion { grid-column:auto; }
  .admin-navigation-grid { grid-template-columns:1fr 1fr; }
  .admin-navigation-grid a { min-height:160px; padding:16px; }
  .admin-navigation-grid strong { font-size:2rem; }
  .profile-simple-grid { grid-template-columns:1fr; }
  .profile-photo-large { width:min(86vw,360px); }
  .submission-modal-image { max-height:78vh; }
  .submission-gallery-modal .modal-dialog { width:calc(100% - 1rem); height:calc(100dvh - 1rem); margin:.5rem; }
  .submission-gallery-modal .modal-content { max-height:calc(100dvh - 1rem); }
  .submission-gallery-stage { height:calc(100dvh - 5.75rem); }
  .submission-gallery-track { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; touch-action:pan-x; }
  .submission-gallery-slide { height:100%; padding:8px 38px; scroll-snap-align:start; scroll-snap-stop:always; }
  .submission-gallery-slide .submission-modal-image { width:auto !important; max-width:calc(100vw - 92px) !important; height:auto !important; max-height:calc(100dvh - 7rem) !important; object-fit:contain !important; object-position:center !important; }
  .submission-gallery-arrow { width:32px; height:48px; border-radius:12px; font-size:2rem; }
  .submission-gallery-arrow.is-previous { left:4px; }
  .submission-gallery-arrow.is-next { right:4px; }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .vdt-sidebar { width: 218px; }
  .vdt-topbar-with-sidebar { margin-left: 218px; }
  .vdt-main-with-sidebar { margin-left: 218px; width: calc(100% - 218px); max-width: none !important; padding-inline: 26px !important; }
}
.points-class-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem;border-top:1px solid #e5e7eb;padding-top:1rem}.points-class-breakdown>div{display:flex;flex-direction:column;gap:.3rem;padding:0 1rem;border-right:1px solid #e5e7eb}.points-class-breakdown>div:first-child{padding-left:0}.points-class-breakdown>div:last-child{padding-right:0;border-right:0}.points-class-breakdown small{color:#64748b}.points-class-breakdown strong{font-size:1.15rem}@media(max-width:575.98px){.points-class-breakdown>div{padding:0 .45rem}.points-class-breakdown small{font-size:.72rem}.points-class-breakdown strong{font-size:.95rem}}
.submission-pdf-thumb{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-height:150px;background:#fffdf0!important;color:#111!important}.submission-pdf-icon{display:grid;place-items:center;width:64px;height:76px;border:2px solid #d9cd00;border-radius:12px;font-weight:900;color:#111;background:#fff}.submission-pdf-frame{display:block;width:100%;height:min(78vh,850px);border:0;background:#fff}@media(max-width:575.98px){.submission-pdf-frame{height:75vh}.submission-pdf-thumb{min-height:120px}}
.server-resource-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:16px;background:#fff}.server-resource-card div{display:flex;flex-direction:column}.server-resource-card small{color:#64748b}@media(max-width:575.98px){.server-resource-card{align-items:stretch;flex-direction:column}.server-resource-card .btn{width:100%}}
.ordered-class-resources{display:flex;flex-direction:column}.ordered-resource-item{padding:1rem;border:1px solid #e5e7eb;border-radius:16px;background:#fff}.ordered-video-vertical{width:min(100%,360px);aspect-ratio:9/16;margin:auto}.ordered-video-vertical iframe{width:100%;height:100%;border:0;border-radius:14px}.ordered-image-button{display:block;width:100%;padding:0;border:0;background:transparent}.ordered-image-button img{display:block;width:100%;max-height:420px;object-fit:contain;background:#f8fafc}
.admin-save-toast{position:fixed;z-index:2000;right:24px;bottom:24px;display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;align-items:center;min-width:min(360px,calc(100vw - 32px));max-width:460px;padding:1rem 1.15rem;border-radius:18px;background:#111;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.28);opacity:0;transform:translateY(24px);pointer-events:none;transition:.2s ease}.admin-save-toast.show{opacity:1;transform:none}.admin-save-toast strong{font-size:1rem}.admin-save-toast small{grid-column:2;color:#d1d5db}.admin-save-toast.success{border-left:6px solid #d9cd00}.admin-save-toast.error{border-left:6px solid #ef4444}.admin-save-spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.28);border-top-color:#d9cd00;border-radius:50%;animation:adminSaveSpin .8s linear infinite}.admin-save-toast.success .admin-save-spinner{animation:none;border:0;background:#d9cd00;clip-path:polygon(14% 52%,0 66%,39% 100%,100% 25%,84% 10%,38% 72%)}.admin-save-toast.error .admin-save-spinner{animation:none;border:0;background:#ef4444;clip-path:polygon(10% 0,50% 40%,90% 0,100% 10%,60% 50%,100% 90%,90% 100%,50% 60%,10% 100%,0 90%,40% 50%,0 10%)}@keyframes adminSaveSpin{to{transform:rotate(360deg)}}@media(max-width:767.98px){.admin-save-toast{right:16px;bottom:92px;left:16px;min-width:0}}
.student-report-history{width:100%;min-width:0;padding:18px;border:1px solid #e1e2e5;border-radius:24px;background:#fff;box-shadow:var(--vdt-shadow)}.student-report-history-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.student-report-history-heading span{color:#756f00;font-size:.72rem;font-weight:900;letter-spacing:.08em}.student-report-history-heading h2{margin:.2rem 0 0;font-size:1.25rem}.student-report-history-heading>strong{display:grid;place-items:center;min-width:42px;height:42px;border-radius:50%;background:#d9cd00;color:#111}.student-report-capsules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;min-width:0}.student-report-capsule{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border:1px solid #e3e4e7;border-radius:22px;background:#fff;box-shadow:0 8px 25px rgba(16,16,16,.06);overflow:hidden}.student-report-capsule-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.student-report-capsule-top>div{min-width:0}.student-report-capsule-top>div>span{color:#756f00;font-size:.7rem;font-weight:900;letter-spacing:.06em}.student-report-capsule h3{margin:.3rem 0 0;font-size:1.05rem;overflow-wrap:anywhere}.student-report-capsule-stats{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid #ececef}.student-report-capsule-stats>div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px}.student-report-capsule-stats>div+div{border-left:1px solid #ececef}.student-report-capsule-stats small,.student-report-message small{color:#756f00;font-size:.68rem;font-weight:900;text-transform:uppercase}.student-report-capsule-stats strong{font-size:.9rem;overflow-wrap:anywhere}.student-report-message{padding:12px 14px;border-radius:16px;background:#f5f5f6}.student-report-message.is-feedback{background:#fffceb;border:1px solid #eee68b}.student-report-message p{margin:.3rem 0 0;overflow-wrap:anywhere}.student-report-open{width:100%;margin-top:auto;border-radius:14px}.student-report-empty{padding:32px 18px;border:1px dashed #cfd1d5;border-radius:20px;text-align:center;color:#6b7280}@media(max-width:575.98px){.student-report-history{padding:12px;border-radius:20px}.student-report-capsules{grid-template-columns:minmax(0,1fr)}.student-report-capsule{padding:15px;border-radius:20px}.student-report-capsule-top{flex-direction:column}.student-report-capsule-top .task-status{align-self:flex-start}.student-report-capsule-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}