:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f6f8; color: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  body { background: #1c1c1e; color: #eee; }
  table, input, .login-card { background: #2c2c2e !important; border-color: #3a3a3c !important; }
  th { background: #26262a !important; }
}
header { display: flex; justify-content: space-between; align-items: center;
         padding: 16px 24px; background: #2563eb; color: white; }
header h1 { margin: 0; font-size: 18px; }
header a { color: white; }
main { padding: 24px; max-width: 900px; margin: 0 auto; }
.row { display: flex; gap: 8px; margin-bottom: 16px; }
input[type=text] { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 14px; }
button { padding: 10px 18px; border-radius: 8px; border: none; background: #2563eb; color: white;
         font-size: 14px; cursor: pointer; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 14px; }
th { background: #f0f1f3; font-weight: 600; }
#uploadStatus { align-self: center; font-size: 13px; color: #16a34a; }
.progress-track { flex: 1; height: 10px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: #2563eb; transition: width .15s ease; }
#progressLabel { font-size: 13px; color: #666; min-width: 40px; text-align: right; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-card { display: flex; flex-direction: column; gap: 10px; padding: 32px; border-radius: 12px;
              border: 1px solid #ddd; background: white; width: 280px; }
.login-card h1 { margin: 0 0 10px; font-size: 20px; text-align: center; }
.login-card input { padding: 10px 12px; border-radius: 8px; border: 1px solid #ccc; }
.err { color: #dc2626; font-size: 13px; margin: 0; }