@font-face { font-family: Michroma; src: url("/wordmark-v21.woff2") format("woff2"); font-weight: 400; font-display: optional; }
:root {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-synthesis: none;
  color: #f5f5f5;
  background: #050505;
  --radius: 12px;
  --text: #f5f5f5;
  --muted: #b8bec7;
  --glass-line: rgba(255, 255, 255, .16);
  --glass-fill: linear-gradient(115deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 28%, rgba(255,255,255,0) 58%, rgba(255,255,255,.055)), rgba(255,255,255,.015);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; }
body.is-ready { visibility: visible; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.star-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.star-layer { position: absolute; top: -20px; left: -20px; width: 2px; height: 2px; border-radius: 50%; background: #eee; will-change: transform, opacity; }
.stars-far { opacity: .6; animation-delay: -8s; box-shadow: 76px 78px #ddd, 238px 156px #ddd, 418px 48px #ddd, 592px 246px #ddd, 789px 94px #ddd, 1033px 188px #ddd, 1232px 63px #ddd, 1428px 264px #ddd, 1634px 114px #ddd, 1845px 44px #ddd, 42px 382px #ddd, 194px 574px #ddd, 366px 436px #ddd, 538px 687px #ddd, 728px 478px #ddd, 964px 610px #ddd, 1168px 394px #ddd, 1392px 526px #ddd, 1608px 672px #ddd, 1830px 438px #ddd, 94px 820px #ddd, 274px 1014px #ddd, 492px 896px #ddd, 664px 1110px #ddd, 882px 952px #ddd, 1098px 806px #ddd, 1314px 1056px #ddd, 1548px 912px #ddd, 1754px 1114px #ddd; animation: stars-far-drift 24s linear infinite -8s; }
.stars-near { width: 3px; height: 3px; opacity: .7; box-shadow: 126px 226px #ddd, 352px 84px #ddd, 694px 330px #ddd, 948px 40px #ddd, 1312px 180px #ddd, 1694px 302px #ddd, 58px 672px #ddd, 408px 768px #ddd, 816px 578px #ddd, 1210px 734px #ddd, 1508px 476px #ddd, 1816px 862px #ddd, 212px 1136px #ddd, 732px 1002px #ddd, 1124px 1160px #ddd, 1548px 1048px #ddd; animation: stars-near-drift 17s linear infinite -5s; }
@keyframes stars-far-drift { 0% { transform: translate3d(-55px, -30px, 0); opacity: 0; } 8%, 88% { opacity: .6; } 100% { transform: translate3d(65px, 75px, 0); opacity: 0; } }
@keyframes stars-near-drift { 0% { transform: translate3d(45px, -70px, 0); opacity: 0; } 7%, 90% { opacity: .85; } 100% { transform: translate3d(-70px, 150px, 0); opacity: 0; } }
.meteor { position: absolute; width: 110px; height: 2px; opacity: 0; background: linear-gradient(90deg, #fff, transparent); will-change: transform, opacity; animation: meteor-fall 10s linear infinite; }
.meteor-one { left: 90%; top: 4%; animation-delay: -1s; }
.meteor-two { left: -15%; top: 10%; width: 75px; animation-name: meteor-cross; animation-duration: 13s; animation-delay: -6s; }
.meteor-three { left: 20%; top: -10%; width: 90px; animation-name: meteor-cross; animation-duration: 16s; animation-delay: -11s; }
@keyframes meteor-fall { 0% { transform: translate3d(180px, -130px, 0) rotate(-35deg); opacity: 0; } 5% { opacity: .75; } 25% { opacity: .6; } 36%, 100% { transform: translate3d(-1050px, 730px, 0) rotate(-35deg); opacity: 0; } }
@keyframes meteor-cross { 0% { transform: translate3d(-180px, -130px, 0) rotate(215deg); opacity: 0; } 5% { opacity: .65; } 25% { opacity: .5; } 36%, 100% { transform: translate3d(1050px, 730px, 0) rotate(215deg); opacity: 0; } }
.app-shell { position: relative; width: min(1440px, calc(100% - 112px)); min-height: 100svh; margin: 0 auto; }
.app-shell:not(.is-ready) { visibility: hidden; }
.app-shell.is-ready { animation: app-enter .3s ease-out backwards; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-family: Michroma, "Segoe UI", sans-serif; font-size: 24px; font-weight: 400; letter-spacing: -.6px; white-space: nowrap; }
.header-controls, .teacher-controls { display: flex; align-items: center; gap: 16px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 16px; line-height: 1.25; font-weight: 600; color: var(--text);
  transition: background .16s, border-color .16s, transform .16s;
}
.button:not(:disabled):active { transform: translateY(1px); }
.button-primary { background: #f5f5f5; border-color: #f5f5f5; color: #11151b; }
.button-primary:not(:disabled):hover { background: #dfe4eb; border-color: #dfe4eb; }
.button-secondary { background: transparent; border-color: transparent; }
.button-secondary:not(:disabled):hover { background: rgba(255,255,255,.08); }
.button-danger { background: #b73645; color: #fff; }
.button-danger:not(:disabled):hover { background: #cb4050; }
.button:disabled, .button.is-disabled { opacity: .45; cursor: default; }
.button.is-disabled { pointer-events: none; }
.button-icon { width: 52px; padding: 0; flex-shrink: 0; }
.teacher-button .icon { display: none; }
main { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0 64px; align-items: start; padding: 76px 0 80px; }
h1, h2, p { margin: 0; }
h1, h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.8px; font-weight: 600; }
.section-title { display: flex; align-items: center; justify-content: space-between; }
.upload-section .section-title { margin-bottom: 32px; }
.upload-form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.field > label:first-child { color: var(--text); font-weight: 400; }
.file-field > label:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-limit { color: var(--muted); }
input[type=text], input[type=password], .file-picker, .dialog, .toast {
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
input[type=text], input[type=password] { appearance: none; width: 100%; height: 52px; padding: 0 16px; color: var(--text); caret-color: #fff; outline: none; }
input:focus-visible, .file-picker:focus-within { border-color: #d9e5f6; box-shadow: 0 0 0 3px rgba(220,232,250,.1), var(--glass-shadow); }
input:disabled, .file-picker.is-disabled { opacity: .45; }
.file-picker { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; height: 52px; padding: 0 16px; cursor: pointer; transition: border-color .16s; }
.file-picker:hover, .file-picker.is-dragging { border-color: #d9e5f6; }
.file-picker > .icon { color: var(--muted); }
.file-picker > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-picker.is-disabled, .file-picker.is-disabled input { cursor: default; }
.upload-button { width: 100%; }
.form-message, .connection-message { color: #ffb5b5; line-height: 1.5; margin-top: 16px; overflow-wrap: anywhere; }
.connection-message { grid-column: 1 / -1; }
.upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.progress-track { height: 3px; flex: 1; background: #353c45; border-radius: 3px; overflow: hidden; }
.progress-track > div { width: 0; height: 100%; background: #f5f5f5; transition: width .18s; }
.upload-progress > span { min-width: 50px; text-align: right; color: var(--muted); }
.files-section { min-width: 0; }
.files-heading { margin-bottom: 28px; min-height: 39px; }
.files-heading h2 { display: flex; align-items: center; gap: 12px; }
.file-count { font-size: 16px; font-weight: 400; color: var(--muted); }
.table-wrap { width: 100%; }
table { width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed; }
th { height: 52px; padding: 0 16px 0 0; border-bottom: 1px solid #292e36; text-align: left; font-weight: 400; color: var(--muted); }
.name-column { width: auto; }
.date-column { width: 146px; }
.size-column { width: 88px; }
.actions-column { width: 240px; padding: 0; }
.sort-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 400; }
.sort-button .icon { width: 16px; height: 16px; opacity: .3; }
.sort-button:hover, th[aria-sort] { color: var(--text); }
th[aria-sort] .icon { opacity: 1; }
th[aria-sort=ascending] .icon { transform: rotate(180deg); }
td { padding: 24px 16px 24px 0; font-size: 16px; line-height: 1.5; vertical-align: middle; }
.file-details { min-width: 0; }
.filename { display: block; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.original-filename { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.mobile-meta { display: none; }
.time-cell, .size-cell { color: var(--muted); font-variant-numeric: tabular-nums; }
.time-cell time { display: block; max-width: 130px; }
.size-cell { white-space: nowrap; }
.actions-cell { padding-right: 0; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.empty-row td { height: 220px; padding: 0; text-align: center; color: var(--muted); }
.loading-dot { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #b8bec7; animation: breathe 1.5s ease-in-out infinite; }
.locked-section { grid-column: 1 / -1; display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.locked-mark .icon { width: 32px; height: 32px; color: var(--muted); }
.dialog { width: min(440px, calc(100% - 40px)); padding: 28px; color: var(--text); overflow: visible; }
.dialog[open] { animation: dialog-in .18s ease-out; }
.dialog::backdrop { background: rgba(0,0,0,.12); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.dialog-heading h2 { font-size: 24px; letter-spacing: -.5px; }
.dialog-close { margin: -8px -8px -8px 0; }
.dialog-submit { width: 100%; margin-top: 24px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.dialog-actions .button { min-width: 104px; }
.delete-filename { color: var(--muted); overflow-wrap: anywhere; white-space: pre-line; line-height: 1.5; }
.toast { width: max-content; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 16px 22px; color: var(--text); max-width: calc(100% - 32px); z-index: 20; animation: toast-in .18s ease-out; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes app-enter { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes breathe { 50% { opacity: .3; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  input[type=text], input[type=password], .file-picker, .dialog, .toast { background: #151b24; }
}
@media (max-width: 1279px) {
  .app-shell { width: calc(100% - 80px); }
  main { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .upload-form { display: grid; grid-template-columns: minmax(180px,1fr) minmax(260px,1.5fr) 160px; align-items: end; gap: 24px; }
}
@media (max-width: 850px) {
  .app-shell { width: calc(100% - 48px); }
  .brand { font-size: 20px; }
  .site-header { min-height: 96px; }
  main { padding-top: 56px; }
  .upload-form { grid-template-columns: minmax(0,1fr) 160px; }
  .name-field { grid-column: 1 / -1; }
  .actions-column { width: 224px; }
  .date-column { width: 136px; }
  .size-column { width: 76px; }
  .button { padding: 0 16px; }
  .button-icon { padding: 0; }
}
@media (max-width: 680px) {
  .app-shell { width: calc(100% - 40px); }
  .brand { font-size: 18px; letter-spacing: -.4px; }
  .site-header { min-height: 88px; flex-wrap: wrap; padding: 20px 0; gap: 16px; }
  .header-controls { width: 100%; justify-content: space-between; }
  .header-controls, .teacher-controls { gap: 10px; }
  main { gap: 40px; padding: 48px 0 56px; }
  .upload-section .section-title { margin-bottom: 28px; }
  table, thead, tbody { display: block; }
  thead { padding-bottom: 8px; border-bottom: 1px solid #292e36; }
  thead tr { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 12px; }
  thead th { width: auto; height: auto; padding: 0; border: 0; }
  thead .actions-column { display: none; }
  tr.file-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; padding: 24px 0; }
  td { display: block; padding: 0; }
  .time-cell, .size-cell { display: none; }
  .mobile-meta { display: flex; flex-wrap: wrap; margin-top: 8px; color: var(--muted); }
  .mobile-size::before { content: ", "; white-space: pre; }
  .row-actions { justify-content: flex-start; }
  .delete-button { margin-left: auto; }
  .empty-row, .empty-row td { display: block; }
  .empty-row td { display: flex; align-items: center; justify-content: center; height: 180px; }
  .dialog { padding: 24px; }
  .lock-button .icon { display: none; }
}
@media (max-width: 420px) {
  .app-shell { width: calc(100% - 36px); }
  .upload-form { display: flex; }
  .button { padding: 0 18px; }
  .button-icon { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .star-layer, .meteor { will-change: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}