:root { font-family: system-ui, sans-serif; color: #183047; background: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.container { max-width: 1080px; margin: auto; padding: 56px 24px 24px; }
header, .file { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; }
h2 { margin: 0 0 8px; font-size: 18px; overflow-wrap: anywhere; }
p { line-height: 1.6; }
.eyebrow { color: #3564a0; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin: 0 0 12px; }
.muted { color: #63768a; font-size: 14px; margin: 0; }
.panel { background: white; border: 1px solid #dfe6ee; border-radius: 16px; padding: 28px; }
.login { max-width: 440px; margin: 40px auto 0; }
.login form { margin-top: 28px; }
label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
input { width: 100%; padding: 12px; border: 1px solid #b9c7d6; border-radius: 8px; font: inherit; }
button, .button { display: inline-block; background: #245ba0; color: white; border: 0; border-radius: 8px; padding: 12px 18px; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.login button { width: 100%; margin-top: 24px; }
.secondary { background: white; color: #274d76; border: 1px solid #cbd7e4; }
:focus-visible { outline: 3px solid #82b5ef; outline-offset: 3px; }
.error { background: #fff0ef; color: #a52929; padding: 12px; border-radius: 8px; font-size: 14px; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.folder { color: inherit; text-decoration: none; }
.folder:hover { border-color: #789ec8; }
.folder-icon { display: block; color: #3564a0; font-size: 32px; margin-bottom: 16px; }
.open { display: block; color: #245ba0; font-size: 14px; font-weight: 600; margin-top: 24px; }
.back { display: inline-block; color: #245ba0; margin: 24px 0; text-decoration: none; }
.file { padding: 20px 0; }
.file + .file { border-top: 1px solid #e5ebf2; }
.empty { text-align: center; padding: 36px 24px; margin-top: 24px; }
footer { color: #63768a; text-align: center; font-size: 12px; line-height: 1.8; margin-top: 40px; }
@media (max-width: 540px) {
  .container { padding: 28px 16px; }
  .panel { padding: 20px; }
  header { align-items: flex-start; }
  .file { flex-direction: column; align-items: stretch; gap: 16px; }
  .button { text-align: center; }
}