.vibe-hero {
  text-align: center;
  padding: var(--space-4xl, 40px) var(--space-2xl, 24px) var(--space-2xl, 24px);
  background: transparent;
}

.vibe-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.vibe-hero__logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--space-lg, 16px);
}

.vibe-hero__title {
  font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
  font-size: var(--text-3xl, 2rem);
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-sm, 8px);
}

.vibe-hero__subtitle {
  font-size: var(--text-lg, 1.1rem);
  color: var(--color-text-secondary, #6B7280);
  margin: 0;
}

.vibe-merge-counter {
  margin-top: var(--space-xl, 20px);
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: var(--text-lg, 1.1rem);
  color: var(--color-text-secondary, #6B7280);
  background: rgba(13, 148, 136, 0.08);
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(13, 148, 136, 0.15);
}

.vibe-merge-counter__number {
  font-weight: 700;
  font-size: var(--text-xl, 1.2rem);
  color: var(--color-primary, #0D9488);
}

.vibe-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: var(--space-2xl, 24px);
  align-items: start;
}

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

.vibe-actions {
  display: flex;
  gap: var(--space-lg, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl, 20px);
}

.vibe-hidden {
  display: none;
}

.vibe-dropzone {
  border: 2px dashed var(--color-border, #EFEDE8);
  border-radius: var(--radius-md, 16px);
  padding: var(--space-2xl, 24px);
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-bottom: var(--space-xl, 20px);
}

.vibe-dropzone--active {
  border-color: var(--color-primary, #0D9488);
  box-shadow: var(--shadow-glow-teal, 0 10px 26px hsl(174 83% 32% / 0.22));
  background: rgba(13, 148, 136, 0.06);
}

.vibe-dropzone__inner {
  text-align: center;
}

.vibe-dropzone__title {
  font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
  font-size: var(--text-xl, 1.2rem);
  font-weight: 600;
  color: var(--color-text-primary, #111827);
  margin-bottom: var(--space-xs, 6px);
}

.vibe-dropzone__hint {
  font-size: 0.95rem;
  color: var(--color-text-secondary, #6B7280);
}

.vibe-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg, 16px);
  margin: var(--space-lg, 16px) 0 var(--space-md, 12px);
}

.vibe-list-title {
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-weight: 600;
  color: var(--color-text-primary, #111827);
}

.vibe-filelist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-xl, 20px);
}

.vibe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg, 16px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border: 1px solid var(--color-border, #EFEDE8);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface, #FFFFFF);
}

.vibe-row__name {
  font-family: var(--font-body, 'Host Grotesk', sans-serif);
  font-weight: 600;
  color: var(--color-text-primary, #111827);
}

.vibe-row__meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6B7280);
  margin-top: 2px;
}

.vibe-row__remove {
  border: 1px solid var(--color-border, #EFEDE8);
  background: transparent;
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-weight: 600;
  color: var(--color-text-secondary, #6B7280);
}

.vibe-row__remove:hover {
  color: var(--color-error, #DC2626);
  border-color: var(--color-error, #DC2626);
  background: rgba(220, 38, 38, 0.06);
}

.vibe-empty {
  padding: var(--space-lg, 16px);
  border-radius: var(--radius-sm, 8px);
  border: 1px dashed var(--color-border, #EFEDE8);
  color: var(--color-text-secondary, #6B7280);
  background: rgba(255, 255, 255, 0.5);
}

.vibe-merge {
  margin-top: var(--space-lg, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 12px);
}

.vibe-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vibe-progress-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6B7280);
}

.vibe-progress {
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.vibe-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary, #0D9488);
  transition: width 0.2s ease;
}

.vibe-message {
  padding: 0;
  min-height: 1.2em;
}

.vibe-message--success {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-radius: var(--radius-sm, 8px);
  background: rgba(13, 148, 136, 0.10);
  color: var(--color-text-primary, #111827);
  border: 1px solid rgba(13, 148, 136, 0.22);
}

.vibe-message--warning {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-radius: var(--radius-sm, 8px);
  background: rgba(253, 199, 58, 0.15);
  color: var(--color-text-primary, #111827);
  border: 1px solid rgba(253, 199, 58, 0.35);
}

.vibe-message--error {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-error-bg, #FEE2E2);
  color: var(--color-error, #DC2626);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.vibe-badge {
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary, #0D9488);
  background: rgba(13, 148, 136, 0.10);
  border: 1px solid rgba(13, 148, 136, 0.20);
  padding: 6px 10px;
  border-radius: var(--radius-full, 9999px);
}

.vibe-ul {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-secondary, #6B7280);
}

.vibe-ul li {
  margin: 8px 0;
}

.vibe-note {
  margin-top: var(--space-xl, 20px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-border, #EFEDE8);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-text-secondary, #6B7280);
}

.vibe-countdown {
  margin-top: var(--space-lg, 16px);
  padding: var(--space-xl, 20px) var(--space-2xl, 24px);
  border-radius: var(--radius-md, 16px);
  background: var(--color-surface-alt, #F5F3EF);
  border: 1px solid var(--color-border, #EFEDE8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md, 12px);
}

.vibe-countdown__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm, 8px);
}

.vibe-countdown__timer {
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: var(--text-3xl, 2rem);
  font-weight: 700;
  color: var(--color-primary, #0D9488);
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.vibe-countdown__timer--urgent {
  color: var(--color-error, #DC2626);
}

.vibe-countdown__label {
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #6B7280);
}

.vibe-countdown__bar-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.vibe-countdown__bar {
  height: 100%;
  width: 100%;
  background: var(--color-primary, #0D9488);
  border-radius: var(--radius-full, 9999px);
  transition: width 1s linear, background-color 0.3s ease;
}

.vibe-countdown__timer--urgent ~ .vibe-countdown__bar-track .vibe-countdown__bar,
.vibe-countdown:has(.vibe-countdown__timer--urgent) .vibe-countdown__bar {
  background: var(--color-error, #DC2626);
}

.vibe-footer {
  text-align: center;
  padding: var(--space-3xl, 32px) var(--space-2xl, 24px);
  margin-top: auto;
}

.vibe-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-xl, 20px);
  margin-bottom: var(--space-sm, 8px);
}

.vibe-footer__link {
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-primary, #0D9488);
  text-decoration: none;
}

.vibe-footer__link:hover {
  text-decoration: underline;
}

.vibe-footer__copy {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #6B7280);
}

.vibe-legal {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-3xl, 32px) var(--space-2xl, 24px);
}

.vibe-legal h1 {
  font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
  font-size: var(--text-3xl, 2rem);
  margin-bottom: var(--space-2xl, 24px);
}

.vibe-legal h2 {
  font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
  font-size: var(--text-xl, 1.2rem);
  margin: var(--space-2xl, 24px) 0 var(--space-md, 12px);
}

.vibe-legal p {
  color: var(--color-text-secondary, #6B7280);
  margin: 0 0 var(--space-lg, 16px);
  line-height: 1.7;
}

.vibe-legal ul {
  color: var(--color-text-secondary, #6B7280);
  padding-left: 20px;
  margin: 0 0 var(--space-lg, 16px);
}

.vibe-legal ul li {
  margin: var(--space-sm, 8px) 0;
  line-height: 1.6;
}