.explore-section, .plant-section, .room-section {
  padding: 60px 0;
  min-height: calc(100vh - 80px);
}

.author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}

.author-avatar.large {
  width: 28px;
  height: 28px;
  font-size: 13px;
  vertical-align: middle;
  margin-right: 8px;
}

.author-avatar span {
  font-weight: 600;
}

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  justify-content: center;
}

.filter-btn {
  padding: 10px 20px;
  font-size: 14px;
  color: var(--fg-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
}

.filter-btn:hover {
  border-color: var(--fg-muted);
  color: var(--fg-primary);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--bg-deep);
  border-color: var(--accent);
}

.mood-search {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.mood-search input {
  width: 100%;
  max-width: 400px;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  transition: all 0.3s var(--ease-out);
}

.mood-search input::placeholder {
  color: var(--fg-muted);
}

.mood-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.seeds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}

.seed-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s var(--ease-out);
}

.seed-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.seed-mini-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.seed-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.seed-mini-player {
  display: grid;
  grid-template-columns: 44px minmax(120px, 1fr) auto minmax(120px, auto) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
}

.seed-mini-player .seed-waveform {
  height: 54px;
  margin-bottom: 0;
}

.seed-author-inline {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--fg-secondary);
  font-size: 13px;
  white-space: nowrap;
}

.seed-mini-card .seed-description {
  display: none;
}

.seed-mini-card .seed-footer {
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 10px;
}

.seed-mini-card .seed-responses {
  display: none;
}

.seed-mini-card .seed-actions .btn {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 14px;
}

.seed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.seed-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-primary);
}

.seed-author {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 4px;
}

.seed-visibility {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--fg-muted);
}

.seed-visibility.public { color: var(--accent); }
.seed-visibility.private { color: #9ca3af; }

.seed-waveform {
  height: 64px;
  background: var(--bg-card);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.seed-waveform::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress, 0%);
  background: var(--accent-dim);
  transition: width 0.1s;
}

.seed-wave-bar {
  flex: 1;
  max-width: 4px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.2s var(--ease-out);
}

.seed-waveform:hover .seed-wave-bar {
  transform: scaleY(1.2);
}

.seed-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-out);
}

.play-btn:hover {
  transform: scale(1.08);
}

.play-btn.playing {
  background: var(--fg-primary);
}

.seed-time {
  font-size: 14px;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

.seed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.seed-tag {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--bg-elevated);
  border-radius: 16px;
  color: var(--fg-secondary);
}

.seed-tag.bpm { color: var(--accent); }
.seed-tag.key { color: var(--fg-primary); }

.seed-description {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seed-actions {
  display: flex;
  gap: 12px;
}

.seed-actions .btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
}

.seed-card.playing {
  border-color: var(--accent);
  background: var(--bg-card);
}

.seed-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.seed-responses {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
}

.seed-responses svg {
  color: var(--accent);
}

.seed-progress {
  font-size: 12px;
  color: var(--accent);
  margin-left: auto;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.no-seeds {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-muted);
}

.no-seeds p {
  margin-bottom: 20px;
  font-size: 16px;
}

/* Toast styles */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-success {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.toast-error {
  border-color: #ff4444;
  background: #1a1111;
}

.toast-error svg {
  color: #ff4444;
}

/* Room styles */
.room-description {
  color: var(--fg-secondary);
  margin-top: 16px;
  line-height: 1.6;
}

.play-btn.large {
  width: 56px;
  height: 56px;
}

.play-btn.large svg {
  width: 24px;
  height: 24px;
}

.timeline-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.timeline-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-muted);
  background: var(--bg-surface);
  border-radius: 12px;
  border: 1px dashed var(--border);
}

/* Response form */
.form-hint {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 16px;
}

.response-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
}

.type-icon {
  font-size: 20px;
}

.type-label {
  font-size: 11px;
  text-transform: capitalize;
}

.response-file-upload.has-file {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.response-file-upload.has-file span {
  color: var(--fg-primary);
}

.response-form-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.collaborator-avatar span {
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 14px;
}

.collaborator.you {
  opacity: 0.6;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

/* Form improvements */
.file-upload.dragging {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Plant Form */
.seed-form {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plant-auth-layout,
.plant-seed-panel {
  max-width: 980px;
  margin: 0 auto;
}

.plant-auth-intro {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

.plant-auth-intro h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 0.95;
  letter-spacing: 0;
}

.plant-auth-intro p:last-child {
  color: var(--fg-secondary);
  line-height: 1.6;
}

.plant-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.plant-auth-card {
  height: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--fg-primary);
  transition: all 0.3s var(--ease-out);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--fg-muted);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' stroke='%236b6b70' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.file-upload {
  padding: 32px;
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.file-upload:hover {
  border-color: var(--accent);
  background: var(--bg-card);
}

.file-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--fg-muted);
}

.file-upload-content p {
  font-size: 15px;
  color: var(--fg-secondary);
}

.file-upload-content span {
  font-size: 13px;
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
}

.file-preview span {
  font-size: 14px;
  color: var(--fg-primary);
}

.file-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--fg-muted);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.file-remove:hover {
  background: #ff4444;
  color: white;
}

.radio-group {
  display: flex;
  gap: 16px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.radio-option span {
  font-size: 14px;
  color: var(--fg-secondary);
}

/* Room */
.room-header-section {
  margin-bottom: 32px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg-secondary);
  transition: color 0.3s;
}

.back-btn:hover { color: var(--fg-primary); }

.room-content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
}

@media (max-width: 1024px) {
  .room-content { grid-template-columns: 1fr; }
}

.room-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.room-title-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.room-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.room-title-info h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}

.room-creator {
  font-size: 14px;
  color: var(--fg-muted);
}

.room-stats {
  display: flex;
  gap: 24px;
}

.room-stat {
  text-align: center;
}

.room-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
}

.room-stat span {
  font-size: 12px;
  color: var(--fg-muted);
}

.room-seed-player {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.seed-waveform-large {
  flex: 1;
  height: 80px;
  background: var(--bg-surface);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

.seed-waveform-large::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress, 0%);
  background: var(--accent-dim);
}

.seed-wave-large {
  flex: 1;
  max-width: 5px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.15s var(--ease-out);
}

.seed-waveform-large:hover .seed-wave-large {
  transform: scaleY(1.15);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.timeline-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: all 0.3s var(--ease-out);
}

.timeline-item:hover {
  border-color: var(--border);
}

.timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-icon.guitar { background: #ff6b6b20; color: #ff6b6b; }
.timeline-icon.vocals { background: #9b59b620; color: #9b59b6; }
.timeline-icon.bass { background: #3498db20; color: #3498db; }
.timeline-icon.beat { background: #2ecc7120; color: #2ecc71; }
.timeline-icon.synth { background: #f39c1220; color: #f39c12; }
.timeline-icon.idea { background: #e91e6320; color: #e91e63; }
.timeline-icon.voice { background: #00bcd420; color: #00bcd4; }

.timeline-content { flex: 1; }

.timeline-type {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.timeline-type.guitar { color: #ff6b6b; }
.timeline-type.vocals { color: #9b59b6; }
.timeline-type.bass { color: #3498db; }
.timeline-type.beat { color: #2ecc71; }
.timeline-type.synth { color: #f39c12; }
.timeline-type.idea { color: #e91e63; }
.timeline-type.voice { color: #00bcd4; }

.timeline-author {
  font-size: 14px;
  color: var(--fg-primary);
  font-weight: 500;
}

.timeline-time {
  font-size: 12px;
  color: var(--fg-muted);
  margin-left: 8px;
  font-weight: 400;
}

.timeline-text {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-top: 8px;
}

.timeline-wave {
  margin-top: 12px;
  height: 40px;
  background: var(--bg-card);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 12px;
}

.room-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.response-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.response-form-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.response-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.response-type-btn {
  padding: 12px 8px;
  font-size: 12px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--fg-secondary);
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
}

.response-type-btn:hover {
  border-color: var(--fg-muted);
}

.response-type-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.response-form-card textarea {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--fg-primary);
  resize: vertical;
  min-height: 80px;
  margin-bottom: 16px;
}

.response-form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.response-file-upload {
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.3s;
}

.response-file-upload:hover {
  border-color: var(--accent);
}

.response-file-upload span {
  font-size: 13px;
  color: var(--fg-muted);
}

.collaborators-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.collaborators-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--fg-muted);
}

.collaborator-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collaborator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collaborator-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
}

.collaborator-avatar:nth-child(1) { background: linear-gradient(135deg, #ff6b6b, #feca57); }
.collaborator-avatar:nth-child(2) { background: linear-gradient(135deg, #9b59b6, #3498db); }
.collaborator-avatar:nth-child(3) { background: linear-gradient(135deg, #2ecc71, #3498db); }

.collaborator-info {
  flex: 1;
}

.collaborator-name {
  font-size: 14px;
  color: var(--fg-primary);
  font-weight: 500;
}

.collaborator-role {
  font-size: 12px;
  color: var(--fg-muted);
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--fg-primary);
  opacity: 0;
  transition: all 0.4s var(--ease-out);
  z-index: 1000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.seed-card {
  animation: fadeInUp 0.4s var(--ease-out) backwards;
}

.seeds-grid .seed-card:nth-child(1) { animation-delay: 0s; }
.seeds-grid .seed-card:nth-child(2) { animation-delay: 0.05s; }
.seeds-grid .seed-card:nth-child(3) { animation-delay: 0.1s; }
.seeds-grid .seed-card:nth-child(4) { animation-delay: 0.15s; }
.seeds-grid .seed-card:nth-child(5) { animation-delay: 0.2s; }
.seeds-grid .seed-card:nth-child(6) { animation-delay: 0.25s; }

.timeline-item {
  animation: fadeInUp 0.4s var(--ease-out) backwards;
}

.timeline-item:nth-child(1) { animation-delay: 0s; }
.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.2s; }

/* ============================================
   DEMO ROOM - Full Creative Experience
   ============================================ */

.room-section {
  padding: 40px 0 80px;
}

.room-header-section {
  margin-bottom: 32px;
}

.room-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  gap: 32px;
}

.room-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin-bottom: 12px;
}

.room-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.room-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-surface);
  border-radius: 20px;
  font-size: 14px;
  color: var(--fg-secondary);
}

.room-creator-badge .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.separator {
  color: var(--fg-muted);
}

.room-date {
  font-size: 14px;
  color: var(--fg-muted);
}

.room-technical-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tech-tag {
  padding: 6px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  font-size: 13px;
  color: var(--fg-secondary);
}

.tech-tag.mood {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: transparent;
}

.room-header-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.room-header-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Live Presence - Sala de Ensaios */
.live-presence-room {
  margin-bottom: 40px;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.live-presence-room::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6, #3498db);
}

.room-stage {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.stage-area {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.stage-spotlight {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
  animation: spotlight-pulse 3s ease-in-out infinite;
}

@keyframes spotlight-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

.stage-waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  z-index: 1;
}

.stage-bar {
  width: 8px;
  background: linear-gradient(to top, var(--accent), #8b5cf6);
  border-radius: 4px 4px 0 0;
  animation: stage-bar-float 1.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.stage-bar:nth-child(odd) {
  --delay: 0.1s;
}

.room-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.zone {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 140px;
  transition: all 0.3s var(--ease-out);
}

.zone:hover {
  transform: translateY(-4px);
  border-color: var(--fg-muted);
}

.zone-icon {
  font-size: 28px;
}

.zone-label {
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.zone-sofa {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, var(--bg-card) 100%);
}

.zone-producer {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, var(--bg-card) 100%);
}

.zone-musician {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, var(--bg-card) 100%);
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: person-enter 0.5s ease-out;
}

@keyframes person-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--bg-deep);
}

.person-listening .person-avatar {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s infinite;
}

.person-producer .person-avatar {
  background: #3498db;
}

.person-musician .person-avatar {
  background: #2ecc71;
}

.person-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
}

.person-status {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Original Seed Section */
.original-seed-section {
  margin-bottom: 48px;
}

.seed-player-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.player-waveform-container {
  position: relative;
  margin-bottom: 20px;
}

.player-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 80px;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 0 20px;
  overflow: hidden;
}

.player-waveform .wave-bar {
  flex: 1;
  max-width: 4px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.2s var(--ease-out);
}

.player-waveform:hover .wave-bar {
  transform: scaleY(1.1);
}

.playback-markers {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  pointer-events: none;
}

.marker {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
}

.marker span {
  font-size: 10px;
  color: var(--accent);
  background: var(--bg-surface);
  padding: 2px 6px;
  border-radius: 4px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.play-btn.large {
  width: 52px;
  height: 52px;
}

.player-time {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
}

.current-time {
  color: var(--fg-primary);
}

.time-separator {
  color: var(--fg-muted);
  margin: 0 4px;
}

.player-volume {
  margin-left: auto;
  color: var(--fg-muted);
  cursor: pointer;
}

.seed-intent {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.seed-intent h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seed-intent p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-secondary);
  font-style: italic;
}

.seed-timestamp-comments {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timestamp-comment {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.ts-marker {
  padding: 4px 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.ts-text {
  color: var(--fg-secondary);
}

.ts-author {
  color: var(--fg-muted);
  font-size: 12px;
}

/* Evolution Timeline */
.evolution-section {
  margin-bottom: 48px;
}

.section-header {
  margin-bottom: 32px;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}

.section-header p {
  font-size: 15px;
  color: var(--fg-muted);
}

.evolution-timeline {
  display: flex;
  flex-direction: column;
}

.evolution-node {
  display: flex;
  gap: 0;
}

.node-connector {
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connector-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, var(--accent), var(--border));
}

.node-content {
  flex: 1;
  padding-bottom: 24px;
}

.node-origin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  max-width: 300px;
}

.origin-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.origin-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

.node-contribution {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: all 0.3s var(--ease-out);
}

.node-contribution:hover {
  border-color: var(--border);
  transform: translateX(4px);
}

.contribution-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.contribution-details {
  flex: 1;
}

.contribution-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.contribution-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 12px;
}

.contribution-type.synth { background: #f39c1220; color: #f39c12; }
.contribution-type.bass { background: #3498db20; color: #3498db; }
.contribution-type.voice { background: #00bcd420; color: #00bcd4; }
.contribution-type.guitar { background: #ff6b6b20; color: #ff6b6b; }
.contribution-type.vocals { background: #9b59b620; color: #9b59b6; }

.contribution-author {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
}

.contribution-time {
  font-size: 12px;
  color: var(--fg-muted);
}

.contribution-text {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.contribution-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-wave {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 28px;
  flex: 1;
  max-width: 150px;
  background: var(--bg-card);
  border-radius: 4px;
  padding: 0 6px;
}

.mini-bar {
  flex: 1;
  background: var(--fg-muted);
  border-radius: 1px;
  opacity: 0.5;
}

.preview-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  transition: all 0.2s;
}

.preview-play:hover {
  background: var(--accent);
  color: var(--bg-deep);
}

/* Musical Responses */
.responses-section {
  margin-bottom: 48px;
}

.responses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.response-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s var(--ease-out);
}

.response-card:hover {
  border-color: var(--border);
  transform: translateY(-2px);
}

.response-card.add-new {
  border: 2px dashed var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.response-card.add-new:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.add-new-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--fg-muted);
}

.add-new-content span {
  font-size: 14px;
}

.response-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.response-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 14px;
}

.response-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.response-type {
  font-size: 12px;
  font-weight: 500;
}

.response-type.synth { color: #f39c12; }
.response-type.bass { color: #3498db; }
.response-type.guitar { color: #ff6b6b; }
.response-type.vocals { color: #9b59b6; }

.response-author {
  font-size: 13px;
  color: var(--fg-secondary);
}

.response-time {
  font-size: 11px;
  color: var(--fg-muted);
}

.response-text {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.response-waveform {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 40px;
  background: var(--bg-card);
  border-radius: 6px;
  padding: 0 8px;
  margin-bottom: 12px;
}

.response-waveform .wave-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.7;
}

.response-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: var(--bg-elevated);
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-secondary);
  transition: all 0.2s;
}

.response-play-btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
}

/* Creative Conversation */
.conversation-section {
  margin-bottom: 48px;
}

.conversation-thread {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.conversation-message {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.conversation-message:last-of-type {
  border-bottom: none;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.message-author {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
}

.message-time {
  font-size: 12px;
  color: var(--fg-muted);
}

.message-timestamp {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
}

.message-text {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.conversation-input {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.conversation-input input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--fg-primary);
  font-size: 14px;
}

.conversation-input input:focus {
  outline: none;
  border-color: var(--accent);
}

.voice-note-btn, .send-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  transition: all 0.2s;
}

.voice-note-btn:hover {
  color: var(--accent);
}

.send-btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
}

/* Add Response Section */
.add-response-section {
  margin-bottom: 48px;
}

.add-response-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px;
}

.response-type-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: all 0.3s var(--ease-out);
}

.type-option:hover {
  border-color: var(--fg-muted);
}

.type-option.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.type-emoji {
  font-size: 24px;
}

.type-name {
  font-size: 12px;
  text-transform: capitalize;
  color: var(--fg-secondary);
}

.type-option.active .type-name {
  color: var(--accent);
}

.form-audio-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.form-audio-upload:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.form-audio-upload span {
  font-size: 14px;
  color: var(--fg-secondary);
}

.upload-hint {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
}

.response-textarea {
  width: 100%;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--fg-primary);
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  margin-bottom: 16px;
  font-family: var(--font-body);
}

.response-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.response-options {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.option-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg-secondary);
}

.option-toggle input {
  accent-color: var(--accent);
}

.submit-response {
  width: 100%;
  padding: 16px;
  font-size: 15px;
}

/* Fork Section */
.fork-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.fork-header {
  margin-bottom: 20px;
}

.fork-header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.fork-header p {
  font-size: 14px;
  color: var(--fg-muted);
}

.fork-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--bg-elevated);
  border-radius: 12px;
  margin-bottom: 20px;
}

.fork-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.fork-text strong {
  display: block;
  font-size: 15px;
  color: var(--fg-primary);
  margin-bottom: 4px;
}

.fork-text p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.5;
}

.fork-section .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Room Stats Bar */
.room-stats-bar {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--accent);
}

.stat-label {
  font-size: 13px;
  color: var(--fg-muted);
}

/* Account and Seed Repository */
.account-section,
.seed-page-section {
  padding: 56px 0 88px;
  min-height: calc(100vh - 80px);
}

.repository-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(180px, 220px);
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.repository-toolbar .mood-search {
  margin-bottom: 0;
}

.repository-user-filter select {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  outline: none;
}

.repository-user-filter select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 56px;
  align-items: start;
  max-width: 980px;
  margin: 36px auto 0;
}

.login-form-stack {
  display: grid;
  gap: 18px;
}

.login-copy h1,
.account-hero h1,
.seed-detail-header h1,
.seed-detail-empty h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.login-copy p,
.account-hero p,
.seed-detail-header p,
.seed-detail-empty p {
  color: var(--fg-secondary);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
}

.login-card,
.account-panel,
.seed-detail,
.seed-detail-empty {
  background: rgba(17, 17, 19, 0.86);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
}

.login-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-card h2,
.account-panel h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 560;
}

.login-card label,
.compact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 13px;
}

.login-card input,
.login-card select,
.compact-form input,
.seed-password-form input {
  width: 100%;
  padding: 14px 16px;
  color: var(--fg-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  outline: none;
}

.login-card input:focus,
.login-card select:focus,
.compact-form input:focus,
.seed-password-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.login-hint,
.muted-copy {
  color: var(--fg-muted);
  font-size: 13px;
}

.account-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 26px;
}

.account-hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 12px;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.profile-overview {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
  margin-bottom: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.profile-avatar-large {
  width: 86px;
  height: 86px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
}

.profile-overview h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 560;
  margin-bottom: 6px;
}

.profile-overview p {
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.account-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.account-identity span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 11px;
  color: var(--fg-primary);
  background: rgba(212, 168, 85, 0.08);
  border: 1px solid rgba(212, 168, 85, 0.2);
  border-radius: 999px;
  font-size: 12px;
}

.account-identity strong {
  color: var(--accent);
  font-weight: 700;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-facts span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  color: var(--fg-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 12px;
}

.profile-facts strong {
  color: var(--accent);
  font-weight: 650;
}

.account-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.account-stat {
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.account-stat span {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
}

.account-stat p {
  color: var(--fg-muted);
  font-size: 13px;
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.account-panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panel-heading p {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 5px;
}

.seed-create-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-form,
.password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 13px;
}

.password-form input {
  padding: 14px 16px;
  color: var(--fg-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  outline: none;
}

.password-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.account-upload {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.account-upload:hover,
.account-upload.dragging {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.upload-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(212, 168, 85, 0.12);
}

.account-upload strong,
.account-upload span {
  display: block;
}

.account-upload strong {
  color: var(--fg-primary);
  font-size: 15px;
}

.account-upload span {
  color: var(--fg-muted);
  font-size: 13px;
  margin-top: 4px;
}

.instrument-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.instrument-picker > span {
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 500;
}

.instrument-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-check span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--fg-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.chip-check input:checked + span {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
}

.visibility-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.visibility-box .radio-option {
  min-height: 52px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.link-password {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 13px;
}

.link-password input {
  padding: 13px 15px;
  color: var(--fg-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.compact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.locked-visibility {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.locked-visibility p {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.35;
}

.room-link-list,
.my-seeds-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.room-link-card,
.my-seed-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.room-link-card {
  flex-direction: column;
  align-items: stretch;
}

.room-link-card strong,
.my-seed-row h3 {
  color: var(--fg-primary);
  font-size: 15px;
}

.room-link-card span,
.my-seed-row p {
  color: var(--fg-muted);
  font-size: 13px;
}

.room-link-card div,
.my-seed-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.my-seed-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.seed-detail,
.seed-detail-empty {
  padding: 28px;
  margin-top: 22px;
}

.seed-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 28px;
}

.seed-detail-header h1 {
  font-size: clamp(34px, 5vw, 56px);
}

.seed-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.seed-listen-panel,
.seed-info-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px;
}

.seed-page-player {
  box-shadow: none;
}

.seed-page-mini-player {
  grid-template-columns: 52px minmax(180px, 1fr) auto minmax(140px, auto) auto;
  margin-bottom: 16px;
}

.seed-page-mini-player .play-btn {
  width: 52px;
  height: 52px;
}

.seed-page-waveform {
  height: 96px !important;
}

.seed-page-wave {
  height: 120px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 16px;
  background: #0c0c0d;
  border-radius: 12px;
  margin-bottom: 16px;
}

.seed-page-wave span {
  flex: 1;
  max-width: 8px;
  background: linear-gradient(to top, var(--accent), var(--accent-hover));
  border-radius: 999px;
  opacity: 0.86;
}

.seed-audio-player {
  width: 100%;
  margin-bottom: 16px;
}

.seed-page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seed-info-panel dl {
  display: grid;
  gap: 14px;
}

.seed-info-panel div {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.seed-info-panel div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.seed-info-panel dt {
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.seed-info-panel dd {
  color: var(--fg-primary);
  font-size: 14px;
}

.seed-author-profile {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.seed-author-profile h3 {
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.seed-author-profile p {
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
}

.seed-page-intent {
  margin-top: 20px;
}

.seed-detail-empty {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.seed-detail-empty p {
  margin: 0 auto 24px;
}

.seed-password-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .container { padding: 0 16px; }

  .seeds-grid { grid-template-columns: 1fr; gap: 16px; }

  .filters { gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .filter-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }

  .seed-card { padding: 16px; }
  .seed-header { flex-direction: column; gap: 12px; }
  .seed-mini-header { flex-direction: column; }
  .seed-mini-player,
  .seed-page-mini-player {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .seed-author-inline,
  .seed-progress {
    grid-column: 1 / -1;
  }
  .seed-meta { flex-wrap: wrap; }
  .seed-tag { font-size: 11px; padding: 4px 8px; }
  .seed-footer { flex-direction: column; gap: 12px; align-items: stretch; }
  .seed-actions { flex-direction: column; }
  .seed-actions .btn { width: 100%; }

  /* Room Responsive */
  .room-header-main { flex-direction: column; gap: 20px; }
  .room-header-info { width: 100%; }
  .room-header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .room-header-actions .btn { flex: 1; min-width: 120px; }

  .live-presence { flex-wrap: wrap; gap: 12px; }

  .seed-player-card { padding: 16px; }
  .player-waveform { height: 60px; }
  .player-controls { flex-wrap: wrap; gap: 12px; }

  .evolution-timeline { padding-left: 0; }
  .node-connector { display: none; }
  .node-contribution { margin-left: 0; }

  .responses-grid { grid-template-columns: 1fr; }

  .response-type-selector { grid-template-columns: repeat(2, 1fr); }

  .conversation-thread { padding: 16px; }
  .conversation-input { flex-wrap: wrap; }
  .conversation-input input { width: 100%; }

  .fork-info { flex-direction: column; text-align: center; }
  .fork-section { padding: 20px; }

  .room-stats-bar { flex-wrap: wrap; gap: 24px; justify-content: center; }

  .add-response-form { padding: 20px; }

  .repository-toolbar,
  .login-layout,
  .plant-auth-grid,
  .account-management-grid,
  .account-grid,
  .seed-detail-grid {
    grid-template-columns: 1fr;
  }

  .account-hero,
  .seed-detail-header,
  .my-seed-row {
    flex-direction: column;
    align-items: stretch;
  }

  .account-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-overview {
    grid-template-columns: 1fr;
  }

  .visibility-box {
    grid-template-columns: 1fr;
  }

  .seed-password-form,
  .seed-page-actions {
    flex-direction: column;
  }

  .seed-page-actions .btn,
  .seed-password-form .btn {
    width: 100%;
  }

  /* Hero */
  .hero { padding: 60px 0; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  /* Explore */
  .explore-section, .plant-section, .room-section { padding: 40px 0; }
  .section-title { font-size: 28px; }

  /* Plant Form */
  .seed-form { gap: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .form-group { width: 100%; }
}

@media (max-width: 480px) {
  .room-title { font-size: 24px; }
  .tech-tag { font-size: 11px; padding: 4px 10px; }
  .room-header-actions .btn { font-size: 13px; padding: 10px 14px; }
  .section-header { margin-bottom: 24px; }
  .section-header h2 { font-size: 22px; }
}

/* ------------------------------------------------------------------
   My Area (alpha 2027): side menu, storage bar, rooms with the seed on
   top, community rules and invites. Same look as the redesigned app.
   ------------------------------------------------------------------ */
.ma-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.ma-side {
  flex: 1 1 220px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ma-side-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
  padding: 0 12px 6px;
}

.ma-menu {
  /* The site's global nav rule makes every <nav> a fixed top bar. */
  position: static;
  z-index: auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ma-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--fg-secondary);
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.ma-menu-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #3a372f;
  flex-shrink: 0;
}

.ma-menu-item span { flex: 1; }
.ma-menu-item small { color: var(--fg-muted); font-size: 11px; }
.ma-menu-item:hover { background: var(--bg-elevated); color: var(--fg-primary); }
.ma-menu-item.is-active { background: var(--bg-elevated); color: var(--fg-primary); font-weight: 600; }
.ma-menu-item.is-active::before { background: var(--accent); }
.ma-signout { margin-top: 12px; align-self: flex-start; }

.ma-main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ma-welcome h1 { font-size: 30px; font-weight: 600; }
.ma-welcome p { color: var(--fg-secondary); }

.ma-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ma-way {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.ma-way.is-primary { border-color: #3c3220; background: #17140e; }

.ma-way-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #262420, #141310);
  border: 1px solid #3a372f;
  color: #e9e3d6;
}

.ma-way.is-primary .ma-way-icon { background: linear-gradient(145deg, #3a2e17, #1d170c); border-color: #6b5426; color: #e8bf6a; }

.ma-way-icon svg,
.ma-seed-play svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ma-way-copy { flex: 1; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.ma-way-copy span { color: var(--fg-secondary); font-size: 13px; overflow-wrap: anywhere; }
.ma-way-copy small { color: var(--fg-muted); font-size: 12px; }

.ma-usage {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-usage-top { display: flex; align-items: baseline; gap: 6px; }
.ma-usage-top span { color: var(--fg-secondary); font-size: 12px; }

.ma-usage-bar {
  height: 8px;
  border-radius: 4px;
  background: #24221c;
  overflow: hidden;
  display: flex;
}

.ma-usage .seg-audio { background: var(--accent); }
.ma-usage .seg-seeds { background: #8cc2f5; }
.ma-usage .seg-versions { background: #b9a5e6; }
.ma-usage.is-full .ma-usage-top strong { color: #e9a274; }

.ma-usage-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-secondary);
}

.ma-usage-legend li { display: flex; align-items: center; gap: 6px; }
.ma-usage-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ma-note { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }

.ma-block { display: flex; flex-direction: column; gap: 14px; }
.ma-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ma-block-head h2 {
  flex: 1;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b99a5c;
}

.ma-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.ma-room-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ma-room-seed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #17140e;
  border-bottom: 1px solid #2c2618;
}

.ma-room-seed.is-empty { background: var(--bg-surface); border-bottom-color: var(--border-subtle); }

.ma-seed-play {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--accent);
  color: #17130a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ma-seed-play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ma-room-seed-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ma-seed-label { font-size: 11px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: #b99a5c; }
.ma-seed-label.is-empty { color: var(--fg-muted); }
.ma-seed-name { font-size: 13px; color: #e8d9b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-room-seed.is-empty .ma-seed-name { color: var(--fg-secondary); }

.ma-room-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ma-room-body h3 { font-size: 16px; }
.ma-room-body p { font-size: 12px; color: var(--fg-secondary); }
.ma-room-actions { display: flex; gap: 8px; margin-top: auto; }
.ma-room-actions > * { flex: 1; justify-content: center; text-align: center; }

.ma-rules-alert {
  border: 1px solid #6b5426;
  background: #17140e;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ma-rules-ok { color: var(--fg-primary); font-weight: 600; }
.ma-rules-read summary { cursor: pointer; color: var(--accent); margin: 8px 0; }
.ma-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-chip {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--fg-secondary);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.rules-box {
  border: 1px solid #3a372f;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}

.rules-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #17140e;
  border-bottom: 1px solid #2c2618;
}

.rules-box-head strong { flex: 1; }
.rules-box-head span { font-size: 11px; color: #b99a5c; letter-spacing: 0.08em; text-transform: uppercase; }

.rules-box-body {
  max-height: 180px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #d8d1c2;
  font-size: 13px;
  line-height: 1.55;
}

.rules-consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #3a372f;
  cursor: pointer;
}

.rules-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.rules-consent span { display: flex; flex-direction: column; line-height: 1.4; }
.rules-consent small { color: var(--fg-secondary); font-size: 12px; }
.rules-consent:has(input:checked) { border-color: #6b5426; background: #17140e; }

.invite-banner {
  padding: 10px 12px;
  border-radius: 10px;
  background: #17140e;
  border: 1px solid #3c3220;
  color: #e8d9b8;
  font-size: 13px;
}

.invite-banner.is-error { background: #2a1211; border-color: #7a2e2b; color: #ffb4b0; }

@media (max-width: 720px) {
  /* Phone: one scrolling row of sections on top, storage after the content. */
  .ma-layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .ma-side { display: contents; }
  .ma-side-label { display: none; }
  .ma-menu {
    order: 0;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .ma-menu-item { width: auto; white-space: nowrap; flex-shrink: 0; border: 1px solid var(--border-subtle); }
  .ma-main { order: 1; flex: none; }
  .ma-usage { order: 2; margin-top: 0; }
  .ma-signout { order: 3; margin-top: 0; }
  .ma-way { flex-wrap: wrap; }
  .ma-way-copy { flex: 1 1 160px; }
  .ma-way > .btn, .ma-way > .ma-note { flex-basis: 100%; text-align: center; justify-content: center; }
}

/* My Area, compact: rooms as rows, profile in folding blocks with smaller fields. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ma-main .account-panel { padding: 20px; gap: 14px; }
.ma-main .account-panel h2 { font-size: 18px; }
.ma-main .panel-heading p { font-size: 13px; }
.ma-main .btn-small { min-height: 32px; padding: 0 12px; font-size: 13px; }

.ma-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.ma-list > .muted-copy { padding: 12px 14px; }
.ma-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; }
.ma-row + .ma-row { border-top: 1px solid var(--border-subtle); }
.ma-row:hover { background: var(--bg-elevated); }
.ma-row .ma-seed-play { width: 30px; height: 30px; }
.ma-row-dot { width: 30px; height: 30px; border-radius: 15px; border: 1px dashed var(--border); flex-shrink: 0; }
.ma-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ma-row-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-row-main span { font-size: 12px; color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-row.has-seed .ma-row-main span { color: #d9c69c; }
.ma-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ma-row-actions .btn-trash { width: 32px; height: 32px; min-height: 32px; }

.ma-main .my-seeds-list { gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.ma-main .my-seed-row { border: 0; border-radius: 0; padding: 10px 14px; gap: 12px; flex-direction: row; align-items: center; justify-content: flex-start; background: transparent; }
.ma-main .my-seed-row + .my-seed-row { border-top: 1px solid var(--border-subtle); }

.ma-inline-form { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.ma-inline-form label { flex: 1; min-width: 0; }
.ma-inline-form input { width: 100%; min-height: 36px; padding: 8px 12px; font-size: 14px; }

.ma-profile-head { display: flex; align-items: center; gap: 14px; }
.ma-avatar { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #17130a; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ma-profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ma-profile-id h2 { font-size: 20px; font-weight: 600; }
.ma-profile-id > span { font-size: 13px; color: var(--fg-secondary); overflow-wrap: anywhere; }
.ma-profile-id .profile-facts { margin-top: 6px; }

.ma-profile-form { display: flex; flex-direction: column; gap: 8px; }
.ma-fold { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.ma-fold summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.ma-fold summary::-webkit-details-marker { display: none; }
.ma-fold summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); transform: rotate(-45deg); align-self: center; transition: transform 0.15s; }
.ma-fold[open] summary::before { transform: rotate(45deg); }
.ma-fold summary small { color: var(--fg-muted); font-weight: 400; font-size: 12px; margin-left: auto; }
.ma-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; padding: 0 16px 14px; }
.ma-fields .form-group { gap: 4px; }
.ma-fields .form-group label { font-size: 12px; }
.ma-fields .form-group input,
.ma-fields .form-group select,
.ma-fields .form-group textarea { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.ma-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; }
.ma-form-foot span { flex: 1 1 240px; font-size: 12px; color: var(--fg-muted); }

@media (max-width: 720px) {
  .ma-row, .ma-main .my-seed-row { flex-wrap: wrap; flex-direction: row; align-items: center; }
  .ma-row-actions { flex-wrap: wrap; }
  .ma-row-main { flex: 1 1 0; }
  .ma-row .seed-visibility { display: none; }
  .ma-row-actions { width: 100%; padding-left: 42px; }
  .ma-row-actions > .btn:not(.btn-trash) { flex: 1; justify-content: center; }
}
.ma-main .my-seeds-list:has(> .muted-copy) { border: 0; }
.ma-main .my-seeds-list > .muted-copy { padding: 0; }
.ma-row-actions .btn { white-space: nowrap; }
.ma-main .seed-create-form { gap: 12px; }
.ma-main .seed-create-form .form-row { gap: 14px; }
.ma-main .seed-create-form .form-group { gap: 4px; }
.ma-main .seed-create-form .form-group label { font-size: 12px; }
.ma-main .seed-create-form .form-group input,
.ma-main .seed-create-form .form-group select,
.ma-main .seed-create-form .form-group textarea,
.ma-main .password-form input { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.ma-main .seed-create-form textarea { min-height: 64px; }
.ma-main .seed-create-form .account-upload { padding: 12px 14px; }
.ma-main .seed-create-form > .btn { min-height: 38px; }

/* Public site, approved mockup: two-column hero with the seed player, three steps, repository grid. */
.sw-hero { padding: 132px 0 56px; background: radial-gradient(ellipse at 20% 0%, rgba(212, 168, 85, 0.10), transparent 60%); }
.sw-hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.sw-hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sw-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #17130a; background: var(--accent); border-radius: 6px; padding: 4px 8px; }
.sw-hero-copy h1 { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; }
.sw-hero-copy h1 .accent { color: var(--accent); }
.sw-hero-copy p { color: var(--fg-secondary); font-size: 18px; line-height: 1.55; max-width: 540px; }
.sw-hero-copy .hero-ctas { justify-content: flex-start; margin: 0; }
.sw-hero-copy small { color: var(--fg-muted); font-size: 13px; }

.seed-card.sw-hero-player { flex: 1 1 400px; min-width: 0; border-radius: 18px; border-color: #3c3220; background: #17140e; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.seed-card.sw-hero-player:hover { transform: none; }
.sw-hero-player .seed-waveform { height: 64px; background: transparent; padding: 0; justify-content: stretch; }
.sw-hero-player .seed-wave-bar { max-width: none; }
.sw-layer { display: flex; align-items: center; gap: 10px; }
.sw-layer > span { width: 84px; font-size: 12px; color: var(--fg-secondary); flex-shrink: 0; }
.sw-layer > div { flex: 1; height: 22px; display: flex; align-items: center; gap: 2px; }
.sw-layer i { flex: 1; min-height: 5px; border-radius: 1px; background: #4a463c; }
.sw-layer.is-teal i { background: #4a7c86; }
.sw-layer.is-violet i { background: #5a5080; }
.sw-hero-note { font-size: 12px; color: var(--fg-muted); }
.sw-hero-player .seed-progress { margin: 0; min-height: 0; }
.sw-hero-player .seed-progress:empty { display: none; }

.sw-how { padding: 24px 0 80px; }
.sw-how h2, .sw-repo-head h2 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 20px; }
.sw-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sw-step { border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-surface); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sw-step span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); font-weight: 600; }
.sw-step strong { font-size: 17px; }
.sw-step p { color: var(--fg-secondary); font-size: 14px; line-height: 1.5; }

.sw-repo-head { margin-bottom: 20px; }
.sw-repo-head h2 { margin-bottom: 4px; }
.sw-repo-head p { color: var(--fg-secondary); }
#view-explore .filters { justify-content: flex-start; margin-bottom: 14px; }
#view-explore .repository-toolbar { justify-content: flex-start; margin-bottom: 24px; }
#view-explore .seeds-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: none; gap: 16px; }

.seed-card.sw-seed { padding: 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.sw-seed-head { display: flex; align-items: center; gap: 10px; }
.sw-seed-head .play-btn { width: 36px; height: 36px; flex-shrink: 0; }
.sw-seed-head .play-btn svg { width: 14px; height: 14px; }
.sw-seed-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sw-seed-title strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-seed-title > span { font-size: 12px; color: var(--fg-muted); }
.sw-seed-title small { font-size: 11px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: #b99a5c; }
.sw-seed .seed-waveform { height: 36px; padding: 0 8px; }
.sw-seed .seed-wave-bar { background: #6b5426; }
.sw-seed.seed-card:hover .seed-wave-bar, .sw-seed .play-btn.playing ~ * .seed-wave-bar { background: var(--accent); }
.sw-seed-tags { font-size: 12px; color: var(--fg-secondary); text-transform: capitalize; }
.sw-seed .seed-progress { margin: 0; }
.sw-seed .seed-progress:empty { display: none; }
.sw-seed-actions { display: flex; gap: 8px; margin-top: auto; }
.sw-seed-actions > * { flex: 1; justify-content: center; text-align: center; }

@media (max-width: 720px) {
  .sw-hero { padding: 104px 0 32px; }
  .sw-hero-grid { gap: 28px; }
  .sw-hero-copy p { font-size: 16px; }
}
.sw-seed-title .seed-time { font-size: inherit; color: inherit; font-family: inherit; }
.sw-seed .seed-wave-bar { max-width: none; }
.sw-seed-actions .btn { white-space: nowrap; }
#view-explore .seeds-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#view-explore .repository-toolbar > * { margin-left: 0; }
#view-explore .mood-search { flex: 0 1 420px; }
#view-explore .mood-search { justify-content: flex-start; margin-bottom: 0; }
.forgot-password summary { cursor: pointer; color: var(--accent); font-size: 13px; list-style: none; }
.forgot-password summary::-webkit-details-marker { display: none; }
.forgot-password-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ma-zone-note { font-size: 12px; color: var(--fg-muted); }
.ma-fold-body { padding: 0 16px 16px; }
.ma-fold-body .password-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
#forgot-password-slot:not(:empty) { padding: 0 4px; }