:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #24292E; line-height: 1.5;
  font-family: Roboto, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
a { color: #24292E; }
h1 { font-size: 26px; margin: 8px 0 16px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: #6A737D;
  margin: 0 0 14px; font-weight: 600; }

.topbar { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px;
  border-bottom: 1px solid #E1E4E8; background: #fff; }
.topbar .appname { font-weight: 600; flex: 1; }
.topbar form { display: flex; align-items: center; gap: 12px; margin: 0; }
.logo { background: #111; color: #fff; font-weight: 700; letter-spacing: .08em; line-height: 1.05;
  padding: 9px 12px; display: inline-block; }
.logo small { display: block; font-size: 9px; font-weight: 400; letter-spacing: .14em;
  text-transform: none; }

.card { background: #fff; border: 1px solid #E1E4E8; border-radius: 4px; padding: 20px; margin-bottom: 20px; }
.card.narrow { max-width: 400px; margin: 48px auto; }
.login-card .logo { margin-bottom: 16px; }
.login-card h1 { margin-top: 0; }

button, .btn { display: inline-block; background: #111; color: #fff; border: 0; border-radius: 3px;
  padding: 10px 18px; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .5; cursor: default; }
button.link { background: none; color: #24292E; padding: 0; border-radius: 0; font-size: 13px;
  font-weight: 400; text-transform: none; letter-spacing: 0; text-decoration: underline; }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=file] { width: 100%; padding: 9px 10px;
  border: 1px solid #E1E4E8; border-radius: 3px; font: inherit; background: #fff; color: #24292E; }
form button[type=submit] { margin-top: 14px; }

table { width: 100%; border-collapse: collapse; }
th { background: #F4F5F6; text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: #6A737D; }
th, td { padding: 10px 12px; border-bottom: 1px solid #E1E4E8; }
tbody tr:hover { background: #FAFBFB; }

.chip { display: inline-block; background: #111; color: #fff; border: 1px solid #111; border-radius: 2px;
  padding: 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.chip.queued, .chip.validating { background: #fff; color: #111; }
.chip.failed { background: #B03A2E; border-color: #B03A2E; }

.pct { font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bar-track { background: #F4F5F6; border: 1px solid #E1E4E8; height: 14px; border-radius: 2px;
  overflow: hidden; margin: 12px 0; }
.bar-fill { background: #111; height: 100%; width: 0; transition: width .6s; }
.preview { width: 100%; height: 600px; border: 1px solid #E1E4E8; border-radius: 4px; background: #fff; }

.muted { color: #6A737D; }
.small { font-size: 13px; }
.error { color: #B03A2E; font-size: 13px; margin: 8px 0 0; }
[hidden] { display: none !important; }
h2.error{font-size:19px}