:root{
  --bg:#f7f7fb;         /* page background */
  --fg:#111827;         /* main text */
  --muted:#6b7280;      /* secondary text */
  --primary:#2563eb;    /* buttons/progress */
  --danger:#b91c1c;
  --card:#ffffff;       /* cards/lists */
  --ok:#059669;
  --border:#e5e7eb;     /* subtle borders */
}
*{box-sizing:border-box}
html, body { height: 100%; }
body{
  margin:0;
  min-height: 100dvh;          /* fixes iOS toolbar shrinking */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
  background:var(--bg);
  color:var(--fg);
}

.wrap{max-width:800px;margin:24px auto;padding:0 16px}
h1{font-size:20px;margin:0 0 8px}
p{margin:8px 0}

/* Light cards */
ul.checklist{
  background:var(--card);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
}
ul.checklist li{margin:10px 0}

.card{
  background:var(--card);
  padding:16px;
  border-radius:12px;
  margin:16px 0;
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.slug{color:var(--muted);margin-bottom:8px}

.controls{display:flex;gap:8px;margin:12px 0}

button{border:0;border-radius:10px;padding:12px 16px;font-weight:600;cursor:pointer}
button.primary{background:var(--primary);color:#fff}
button.danger{background:var(--danger);color:#fff}
/* lighter secondary button for light UI */
button.secondary{background:#f3f4f6;color:#111827;border:1px solid var(--border)}
button:disabled{opacity:0.6;cursor:not-allowed}

#uploadAlt{display:flex;align-items:center;gap:8px;margin:10px 0}
#fileInput{color:var(--muted)}

/* Light progress bar */
.progress{
  position:relative;height:14px;background:#f3f4f6;border-radius:8px;overflow:hidden;margin:12px 0;
  border:1px solid var(--border);
}
.progress .bar{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--primary)}
.progress .label{position:absolute;right:8px;top:-22px;font-size:12px;color:var(--muted)}

.hidden{display:none}
.status{min-height:22px;font-size:14px;margin-top:8px;color:var(--fg)}

/* Light notices */
.notice{background:#f3f4f6;color:#111827;padding:12px;border-radius:8px;border:1px solid var(--border)}
.help{color:var(--muted);font-size:12px}
.fallback{background:#fff8e6;color:#7c2d12;padding:10px;border-radius:8px;border:1px solid #fde68a}

/* Optional header image stays the same; looks fine on light */
header{height:100px;background:url('https://cdn.comparably.com/27601523/p/83085_profile_411-locals.webp') center/cover no-repeat;}

/* Big, tall preview on mobile—unchanged behavior */
video#preview{
  width:100%;
  height:70dvh;          /* tall on phones */
  max-height:560px;      /* reasonable cap on desktop */
  background:#000;
  border-radius:8px;
  object-fit:cover;      /* fill area even in portrait */
}

/* Compact spacing on small screens */
@media (max-width: 640px){
  .card{ padding:12px }
  .wrap{ padding:0 12px }
  video#preview{ height:75dvh; } /* a bit taller */
}
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}