.title { margin-bottom: var(--space-6); text-align: center; }

.divider { 
    height: 1px; 
    background: var(--color-border); 
    margin: var(--space-4) 0;
}

.items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1; /* Ensure it takes available space */
}

.file-name { font-weight: 500; font-size: 0.9rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-details { font-size: 0.8rem; color: var(--color-text-muted); }

.item-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.qty-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    
    label { font-size: 0.8rem; color: var(--color-text-muted); }
}

.qty-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    &:focus { outline: none; border-color: var(--color-brand); }
}

.item-price {
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  
  @media(min-width: 500px) {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
  }
}
.full-width { grid-column: span 2; }

.setup-note {
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.actions { display: flex; flex-direction: column; gap: var(--space-3); }

.notes-section {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    
    label {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--color-text-muted);
        display: block;
        margin-bottom: var(--space-2);
    }
    
    p {
        margin: 0;
        font-size: 0.95rem;
        color: var(--color-text);
        white-space: pre-wrap; /* Preserve line breaks */
    }
}
