/* Soundboard (publiek, wachtwoord-gated). Bouwt op uncanny.css-tokens. */
body { margin: 0; }
.sb-wrap { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.sb-head { text-align: center; margin-bottom: 1.5rem; }
.sb-logo { height: 38px; }
.sb-head h1 { margin: 0.6rem 0 0.3rem; }
.sb-sub { color: var(--uc-text-muted); margin: 0 auto; max-width: 38rem; line-height: 1.5; }

.sb-card {
  background: var(--uc-surface);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.sb-card h2 { margin: 0 0 0.8rem; font-size: 1.1rem; }
.sb-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.sb-row .uc-input { flex: 1; min-width: 0; }
.sb-msg { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--uc-text-muted); }

.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sb-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--uc-border); }
.sb-item:last-child { border-bottom: none; }
.sb-item audio { height: 34px; }
.sb-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-empty { color: var(--uc-text-muted); font-style: italic; padding: 0.5rem 0; }

.sb-progress .sb-goal { font-size: 1.5rem; margin-bottom: 0.5rem; }
.sb-bar { height: 10px; background: var(--uc-white-08); border-radius: 6px; overflow: hidden; }
.sb-bar-fill { height: 100%; background: var(--uc-clementine); transition: width 0.4s ease; }
.sb-tasks { margin-top: 0.6rem; color: var(--uc-text-muted); font-size: 0.9rem; }
.sb-bell { margin-top: 0.7rem; font-weight: 800; font-size: 1.05rem; }

.uc-btn.tiny { padding: 0.35rem 0.7rem; font-size: 0.72rem; letter-spacing: 0.1em; }