:root {
  font-family: Inter, "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #14213d;
  background: #f3f6fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #e9f1ff 0, #f6f8fc 46%, #eef2f7 100%); }
button, input { font: inherit; }
.page-shell { width: min(760px, calc(100% - 28px)); margin: 0 auto; padding: 48px 0; }
.card { background: rgba(255,255,255,.96); border: 1px solid rgba(20,33,61,.08); border-radius: 24px; box-shadow: 0 20px 60px rgba(24,48,88,.10); padding: 34px; }
.auth-card { width: min(440px, 100%); margin: 8vh auto 0; }
.upload-card { text-align: center; }
h1 { font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.15; margin: 12px 0 10px; }
.muted { color: #65728a; line-height: 1.65; margin: 0 0 24px; }
.brand-mark, .upload-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; background: #1155cc; color: white; font-weight: 800; letter-spacing: .08em; }
.upload-icon { font-size: 2rem; letter-spacing: 0; }
.form-stack { display: grid; gap: 18px; }
label { display: grid; gap: 8px; text-align: left; font-weight: 650; }
input[type=email], input[type=password] { width: 100%; border: 1px solid #ccd5e3; border-radius: 12px; padding: 13px 14px; color: #14213d; background: white; outline: none; }
input:focus { border-color: #1155cc; box-shadow: 0 0 0 4px rgba(17,85,204,.12); }
button { border: 0; border-radius: 12px; padding: 14px 18px; background: #1155cc; color: white; font-weight: 750; cursor: pointer; }
button:hover { filter: brightness(.95); }
button:disabled { cursor: wait; opacity: .7; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 0 4px; }
.topbar div { display: grid; gap: 3px; }
.topbar span { color: #65728a; font-size: .92rem; }
.link-button { padding: 9px 12px; background: transparent; color: #1155cc; }
.drop-zone { display: grid; place-items: center; min-height: 210px; border: 2px dashed #aebed5; border-radius: 18px; padding: 28px; background: #f8fbff; text-align: center; cursor: pointer; transition: .2s ease; }
.drop-zone:hover { border-color: #1155cc; background: #f1f6ff; }
.drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.drop-title { font-weight: 760; }
.drop-note { color: #65728a; font-weight: 500; font-size: .95rem; }
.messages { display: grid; gap: 10px; margin-bottom: 16px; }
.message { border-radius: 12px; padding: 13px 15px; background: white; border: 1px solid #d8e0eb; box-shadow: 0 10px 24px rgba(24,48,88,.06); }
.message.success { border-color: #9ed6af; background: #f1fff5; color: #176b35; }
.message.error { border-color: #efb2b2; background: #fff5f5; color: #a32626; }
@media (max-width: 560px) {
  .page-shell { padding: 22px 0; }
  .card { padding: 24px 18px; border-radius: 19px; }
  .topbar { align-items: flex-start; }
}