.app-container {
  padding: 16px;
  padding-bottom: calc(100px + var(--safe-area-bottom));
  max-width: 600px;
  margin: 0 auto;
}

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.composer {
  position: fixed;
  bottom: calc(70px + var(--safe-area-bottom));
  left: 16px;
  right: 16px;
  background: var(--surface);
  border-radius: 24px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 90;
}

.composer input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  color: var(--fg);
  font-size: 16px;
  outline: none;
}

.kw { display: inline; transition: background 80ms ease, color 80ms ease; }
.kw-active { background: var(--karaoke-active-bg, #fef08a); color: var(--karaoke-active-fg, #0f172a); font-weight: 600; border-radius: 3px; padding: 0 2px; }
.kp { color: inherit; }

.session-card .text-payload {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 8px;
  max-height: 100px;
  overflow-y: auto;
}