.actions-error{margin-top:var(--space-12)}
.actions-error .btn{width:100%}
/* Light mode UI, Lexend font, minimal en duidelijk */
:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#0f172a;
  --primary-contrast:#ffffff;
  --danger:#b91c1c;
  --danger-contrast:#ffffff;
  --ring:#e5e7eb;
  
  /* Spacing scale */
  --space-2:2px;
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --space-48:48px;
  --space-64:64px;
  --space-80:80px;
}

*{box-sizing:border-box}
html,body{height:100%}
/* Force Lexend everywhere (including form controls) */
html, body, button, input, select, textarea {
  font-family:'Lexend',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
body{
  margin:0;background:var(--bg);color:var(--text);
}

.container{max-width:420px;margin:0 auto;padding:var(--space-24)}
.appbar{padding:var(--space-24) 0 var(--space-8)}
.title{margin:0;font-size:28px;font-weight:700}
.subtitle{margin:var(--space-4) 0 0;color:var(--muted);font-size:14px}

.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:var(--space-16);
  padding:var(--space-20);
  margin-top:var(--space-16);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.hidden{display:none}

.label{display:block;font-size:14px;margin-bottom:var(--space-8)}
.required{color:var(--danger)}
.input{
  width:100%;
  height:var(--space-48);
  border:1px solid var(--ring);
  border-radius:var(--space-12);
  padding:0 var(--space-12);
  font-size:16px;
  outline:none;
}
.input:focus{border-color:#94a3b8;box-shadow:0 0 0 var(--space-4) rgba(148,163,184,.2)}

.actions{display:grid;gap:var(--space-16);margin-top:var(--space-16)}
.controls-row{display:flex;gap:var(--space-16);margin-top:var(--space-12)}
.actions-ready{margin-top:var(--space-12)}
.actions-ready .btn{width:100%}
.secondary{margin-top:var(--space-16)}

.btn{
  appearance:none;
  border:1px solid var(--ring);
  background:#fff;
  color:var(--text);
  padding:var(--space-12) var(--space-16);
  border-radius:var(--space-12);
  font-size:16px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--space-12)
}
.actions .btn{height:var(--space-48);justify-content:center}
.controls-row .btn{height:var(--space-48);justify-content:center;flex:1}
#downloadBtn{border-color:var(--ring)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:var(--primary-contrast);border-color:var(--primary)}
.btn-danger{background:var(--danger);color:var(--danger-contrast);border-color:var(--danger)}
.btn-danger-outline{background:#fff;color:var(--danger);border-color:var(--danger)}
.btn-ghost{background:#fff}
.link{background:none;border:none;color:#2563eb;text-decoration:underline;cursor:pointer;padding:0}

.icon{font-size:18px;line-height:0;vertical-align:middle}
.btn-label{display:inline-block}

/* Ensure Google Material Symbols render crisply */
.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'opsz' 24;
}

/* Recording screen layout tweaks */
#screen-recording .controls-row{gap:var(--space-16)}
#deleteAndRestartBtn{width:100%;height:var(--space-48);justify-content:center;text-align:center}

header.appbar {
  text-align: center;
}

.meta{
  display:grid;
  grid-template-columns:1fr auto;
  grid-auto-rows:auto;
  align-items:center;
  gap:var(--space-8);
  background:#f9fafb;
  border:1px solid var(--ring);
  border-radius:var(--space-12);
  padding:var(--space-12);
}
.company{
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  grid-column:1;
}
.status{
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  background: rgba(107, 114, 128, 0.12);
  padding: var(--space-8) var(--space-16);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  grid-column: 1;
  width: max-content;
}
.timer{
  font-size:28px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
  grid-column:2;
  grid-row:1 / span 2;
  justify-self:end;
}
.viz{
  grid-column:1 / -1;
  width:100%;
  height:40px;
  display:block;
}
.dot{
  display:inline-block;width:var(--space-8);height:var(--space-8);border-radius:999px;background:#ef4444;
  box-shadow:0 0 0 var(--space-8) rgba(239,68,68,0.12);
  margin-left: -8px;
}
.dot.paused{
  background:#9ca3af;
  box-shadow:0 0 0 var(--space-8) rgba(156,163,175,0.12);
}

.player{width:100%;margin-top:var(--space-12)}
.hint{color:var(--muted);font-size:13px;margin-top:var(--space-8)}
.file-name{color:var(--muted);font-size:13px}

.playback{margin-top:var(--space-12)}
.time{color:var(--muted);font-size:14px;align-self:center}
.seek{width:100%;appearance:none;height:var(--space-8);border-radius:999px;background:#e5e7eb;margin-top:var(--space-12)}
.seek::-webkit-slider-thumb{appearance:none;width:var(--space-16);height:var(--space-16);border-radius:999px;background:var(--primary);cursor:pointer}
.seek::-moz-range-thumb{width:var(--space-16);height:var(--space-16);border-radius:999px;background:var(--primary);border:none}

.success-card{text-align:center}
.check{
  width:var(--space-64);height:var(--space-64);border-radius:999px;background:#10b981;color:#fff;
  display:inline-grid;place-items:center;font-size:var(--space-32);margin:var(--space-8) auto var(--space-12);
}
.error-card h2{margin-top:0}

.footer{display:flex;justify-content:center;margin:var(--space-20) 0;color:var(--muted);font-size:13px}
dialog{border:1px solid var(--ring);border-radius:var(--space-12);padding:var(--space-16);max-width:520px}