:root { --admin-danger: #b42318; --admin-danger-soft: #fef3f2; --admin-warning: #b54708; }
[data-theme="dark"] { --admin-danger: #ffb4ab; --admin-danger-soft: #3b1715; --admin-warning: #fdb022; }
body[data-admin-page] { min-inline-size: 0; min-block-size: 100vh; min-block-size: 100dvh; display: flex; flex-direction: column; overflow-x: visible; }
.admin-environment { border: 1px solid var(--color-border); border-radius: 999px; padding: .45rem .7rem; color: var(--color-text-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-main { flex: 1 0 auto; inline-size: 100%; }
.admin-shell { position: relative; z-index: 1; padding-block: clamp(1rem, 4vw, 3rem); }
.admin-main h1 { margin-block: .25rem .5rem; font-size: clamp(1.75rem, 4vw, 2.65rem); }
.admin-main h2 { margin-block: 0 .75rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.admin-panel, .admin-auth-card { min-inline-size: 0; border: 1px solid var(--color-border); border-radius: var(--radius-large); background: var(--color-surface); box-shadow: var(--shadow-card); padding: clamp(1rem, 3vw, 1.5rem); }
.admin-auth-card { max-inline-size: 36rem; margin-inline: auto; }
.admin-loader { color: var(--color-text-muted); }
.admin-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-block-end: 1.5rem; }
.admin-session { margin: 0; text-align: end; overflow-wrap: anywhere; }
.admin-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; }
.admin-search .form-field { margin: 0; }
.admin-status { min-block-size: 1.5rem; margin-block: .75rem 0; color: var(--color-text-muted); }
.admin-status[data-state="error"] { color: var(--admin-danger); }
.admin-status[data-state="success"] { color: var(--color-success, #187b3a); }
.admin-student { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; margin-block: 1.5rem; }
.admin-student dl { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; }
.admin-student dl div { min-inline-size: 0; }
.admin-student dt { color: var(--color-text-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.admin-student dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.revision-card { flex: 0 0 auto; display: grid; gap: .15rem; min-inline-size: 10rem; border-inline-start: 3px solid var(--color-primary); padding-inline-start: 1rem; }
.revision-card span { color: var(--color-text-muted); font-size: .8rem; }
.revision-card strong { font-size: 1.4rem; }
.admin-course-actions { margin-block-end: 1.5rem; }
.admin-course-actions > div { display: flex; flex-wrap: wrap; gap: .75rem; }
.admin-course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-block-end: 1.5rem; }
.admin-course { min-inline-size: 0; }
.module-list { display: grid; gap: .75rem; }
.module-row { min-inline-size: 0; border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 1rem; }
.module-row__top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.module-row h3 { margin: 0; font-size: 1rem; }
.module-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; margin-block: .7rem; font-size: .88rem; }
.module-meta span { color: var(--color-text-muted); }
.module-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.status-pill { display: inline-flex; border-radius: 999px; padding: .25rem .55rem; background: var(--color-background); color: var(--color-text-muted); font-size: .75rem; font-weight: 800; }
.status-pill[data-status="approved"] { background: #eaf7ee; color: #176b34; }
.status-pill[data-status="revoked"] { background: var(--admin-danger-soft); color: var(--admin-danger); }
[data-theme="dark"] .status-pill[data-status="approved"] { background: #163823; color: #a6e9b9; }
.button, .admin-sign-out { min-block-size: 2.75rem; border: 1px solid transparent; border-radius: 999px; padding: .62rem 1rem; font: 700 .875rem/1 var(--font-display); cursor: pointer; }
.button--primary { background: var(--color-primary); color: #fff; }
.button--secondary, .admin-sign-out { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }
.button--danger { border-color: var(--admin-danger); background: transparent; color: var(--admin-danger); }
.button:focus-visible, .admin-sign-out:focus-visible, .dialog-close:focus-visible { outline: 3px solid var(--color-focus, #f4aa00); outline-offset: 2px; }
.button:disabled { cursor: wait; opacity: .58; }
.admin-panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.event-list { display: grid; gap: .75rem; }
.event-card { border-block-start: 1px solid var(--color-border); padding-block-start: .75rem; }
.event-card:first-child { border-block-start: 0; }
.event-card__top { display: flex; justify-content: space-between; gap: 1rem; }
.event-card p { margin: .3rem 0 0; color: var(--color-text-muted); font-size: .88rem; overflow-wrap: anywhere; }
.admin-submissions { margin-block-start: 1.5rem; }
.admin-submissions__status { min-block-size: 1.5rem; margin: 0; color: var(--color-text-muted); }
.admin-submissions__status[data-state="error"] { color: var(--admin-danger); }
.submission-list { display: grid; gap: .85rem; }
.submission-empty { margin: 0; color: var(--color-text-muted); }
.submission-card { min-inline-size: 0; border-block-start: 1px solid var(--color-border); padding-block-start: .85rem; }
.submission-card:first-child { border-block-start: 0; }
.submission-card__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.submission-card h3 { margin: 0; font-size: 1rem; }
.submission-card__meta { margin: .25rem 0 .7rem; color: var(--color-text-muted); font-size: .88rem; }
.submission-card details { border-radius: var(--radius-medium); background: var(--color-background); padding: .75rem 1rem; }
.submission-card summary { color: var(--color-primary); cursor: pointer; font-weight: 750; }
.submission-card__response { margin: .75rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.submission-card__recording { display: grid; gap: .75rem; justify-items: start; inline-size: 100%; min-inline-size: 0; }
.submission-card__recording [data-recording-player] { inline-size: min(100%, 32rem); min-inline-size: 0; }
.submission-card__recording audio { display: block; inline-size: 100%; max-inline-size: 100%; }
.admin-dialog { inline-size: min(92vw, 39rem); max-block-size: 90vh; border: 1px solid var(--color-border); border-radius: var(--radius-large); background: var(--color-surface); color: var(--color-text); padding: 0; box-shadow: var(--shadow-soft); }
.admin-dialog::backdrop { background: rgba(4, 17, 38, .68); }
.admin-dialog form { padding: 1.5rem; }
.admin-dialog__heading { display: flex; justify-content: space-between; gap: 1rem; }
.dialog-close { inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer; }
.dialog-context { padding: .75rem; border-radius: var(--radius-medium); background: var(--color-background); }
.dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-dialog .form-field { margin-block: .85rem 0; }
.admin-dialog input, .admin-dialog select, .admin-search input { inline-size: 100%; min-inline-size: 0; }
.dialog-actions { display: flex; justify-content: end; gap: .75rem; margin-block-start: 1rem; }
.admin-footer__marker { margin-block: .8rem 0; color: #b9c9db; font-size: .84rem; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 47.99rem) {
  .admin-heading, .admin-student { align-items: start; flex-direction: column; }
  .admin-session { text-align: start; }
  .admin-course-grid { grid-template-columns: minmax(0, 1fr); }
  .revision-card { inline-size: 100%; }
}
@media (max-width: 29.99rem) {
  .portal-header__inner { flex-wrap: wrap; }
  .admin-environment { order: 3; }
  .admin-search { grid-template-columns: minmax(0, 1fr); }
  .admin-search .button { inline-size: 100%; }
  .module-row__top, .event-card__top { align-items: start; flex-direction: column; gap: .4rem; }
  .module-meta, .dialog-fields { grid-template-columns: minmax(0, 1fr); }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .admin-dialog { scroll-behavior: auto; } }